row-class-name

属性#xff0c;并给它绑定一个方法。

在这个方法中#xff0c;你可以根据你的业务逻辑来判…要实现el-table的复选框勾选整行变色你可以使用element-ui提供的row-class-name属性结合scoped

首先你需要为el-table组件添加

属性并给它绑定一个方法。

在这个方法中你可以根据你的业务逻辑来判断当前行是否被选中并返回一个自定义的类名。

templateel-table

:row-class-namerowClassNameel-table-column

typeselection/el-table-column!--

...其他列

(this.selectedRows.includes(row))

{return

默认不添加类名},handleSelectionChange(selection)

{this.selectedRows

/style在上述代码中我们首先在el-table中添加了typeselection的el-table-column列这将生成复选框列。

然后我们使用row-class-name属性绑定了一个方法rowClassName用于判断行的选中状态并返回一个自定义的类名。

在rowClassName方法中我们通过判断当前行的数据是否在选中的行数组中来决定是否添加selected-row类名。

当行的数据在选中的行数组中时我们返回’selected-row’这样就能为该行添加自定义的样式。

在handleSelectionChange方法中我们监听复选框的选择事件并将选中的行数据保存在selectedRows数组中以便在rowClassName方法中使用。

最后我们在样式中为selected-row类名指定了背景色你可以根据自己的需要自定义样式。

这样当你在el-table中勾选复选框时被选中的行将展示出自定义的样式。