要实现el-table的复选框勾选整行变色，你可以使用element-ui提供的row-class-name属性结合scoped slot来完成。
首先，你需要为el-table组件添加 row-class-name 属性，并给它绑定一个方法。在这个方法中，你可以根据你的业务逻辑来判断当前行是否被选中，并返回一个自定义的类名。
<template>
<el-table :data="tableData" :row-class-name="rowClassName">
<el-table-column type="selection"></el-table-column>
<!-- ...其他列 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [/* 数据数组 */],
selectedRows: [] // 用于存储选中的行数据
};
},
methods: {
rowClassName({ row }) {
// 判断当前行的数据是否在已选中的行数组中
if (this.selectedRows.includes(row)) {
return 'selected-row'; // 返回自定义的类名
}
return ''; // 默认不添加类名
},
handleSelectionChange(selection) {
this.selectedRows = selection; // 更新选中的行数组
}
}
};
</script>
<style scoped>
.selected-row {
background-color: #f0f0f0; // 设置选中行的背景色
}
</style>
在上述代码中，我们首先在el-table中添加了type="selection"的el-table-column列，这将生成复选框列。然后，我们使用row-class-name属性绑定了一个方法rowClassName，用于判断行的选中状态并返回一个自定义的类名。
在rowClassName方法中，我们通过判断当前行的数据是否在选中的行数组中，来决定是否添加selected-row类名。当行的数据在选中的行数组中时，我们返回’selected-row’，这样就能为该行添加自定义的样式。
在handleSelectionChange方法中，我们监听复选框的选择事件，并将选中的行数据保存在selectedRows数组中，以便在rowClassName方法中使用。
最后，我们在样式中为selected-row类名指定了背景色，你可以根据自己的需要自定义样式。
这样，当你在el-table中勾选复选框时，被选中的行将展示出自定义的样式。
