效果图:
当点击行的时候,则背景添加颜色,再次点击则颜色去掉
1.在el-table标签中添加:row-click和row-style事件
@row-click="tableClick" :row-style="isActive"
tableClick(row) {
if(this.rowAcitve.length == 0) {
this.rowAcitve.push(row)
}else {
for(const index in this.rowAcitve) {
if(this.rowAcitve[index].id == row.id) {
this.rowAcitve.splice(index, 1)
}else {
this.rowAcitve.push(row)
}
}
}
},
isActive({row}) {
const checkIdList = this.rowAcitve.map((item) => item.id);
if (checkIdList.includes(row.id)) {
return {
backgroundColor: "#96c7d2",
};
}
}
row-click:用于保存点击行的数据,并且用于判断rowAcitive中是否已经保存的行数据,如果有则删除。用于实现——当点击行的时候,则背景添加颜色,再次点击则颜色去掉
row-style:用于改变行的背景颜色