<el-table
size=“medium”
style=“width: 100%;”
:data=“listTableData”
stripe
@selection-change=“handleSelectionChange”
:row-class-name=“rowClass”
>
data() {
return {
listTableData: [],
selectRow: [],
selectData: []
}
},
methods: {
handleSelectionChange(rows) {
this.multipleSelection = rows;
this.selectData = rows.map(item => { return item.id; });
},
// 多选高亮选中行
rowClass({ row, rowIndex }) {
if (this.selectRow.includes(row.id)) {
return ‘checkboxActiveClass’;
}
}
},
watch: {
selectData(data) {
this.selectRow = [];
if (data.length > 0) {
data.forEach((item, index) => {
let idx = this.listTableData.findIndex(itm => { return itm.id === item; });
if (idx !== -1) {
this.selectRow.push(item);
}
});
}
}
}
// 自己定义的多行高亮颜色
.checkboxActiveClass {
background-color: #f0f3ff !important;
}