html表格点击单个变色,el-table表格点击列表项可多选并改变列表颜色

1、el-table添加事件row-click

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、选中行设置颜色

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" };

}

},

}