1、el-table添加事件row-click
<el-table @row-click="handleRowClick"></el-table>
methods() {
handleRowClick(row, column, event) {
// list -- 已选的数据
let index = this.multipleSelection.findIndex((item) => {
// 判断已选数组中是否已存在该条数据
return item.id == row.id;
});
if (index == -1) {
// 如果未存在，设置已选状态，并在list中添加这条数据
this.$refs.multipleTable.toggleRowSelection(row, true); //设置复选框为选中状态
} else {
// 如果已存在，设置未选状态，并在list中删除这条数据
this.$refs.multipleTable.toggleRowSelection(row, false); //设置复选框为未选状态
}
},
}
2、选中行设置颜色
<el-table :row-style="rowClass"></el-table>
data() {
return: {
selectRow: [],
}
},
watch() {
multipleSelection(data) {
this.selectRow = [];
if (data.length > 0) {
data.forEach((element) => {
this.selectRow.push(this.listData.indexOf(element));
});
}
},
}
methods: {
rowClass({ row, rowIndex }) {
if (this.selectRow.includes(rowIndex)) {
return { background: "#ffffdd" };
}
},
}
