设置:row-class-name="tableRowClassName"
<div class="table">
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
empty-text="购物车是空的哦~ 快去选购商品吧~"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
></el-table>
</div>
export default {
data() {
return {
tableData: [
{
shopname:
"OPPO Enco X2真无线入耳式蓝牙耳机 降噪游戏音乐运动耳机 久石让调音 通用苹果华为小米手机 凝霜白",
price: "999.99", //单价
quantity: 1, //数量
shopId: 1, //商品ID
},],
multipleSelection: [],
};
},
}
设置方法 tableRowClassName
tableRowClassName({ row }) {
// 当前选中行id 与 表格的各行比较
//如果当前行在已选中的数据中则返回
if (this.multipleSelection.some((item) => item === row)) {
return "success-row";
}
return "";
},
设置CSS
/* 选中的行背景色 */
.table /deep/ .success-row {
background-color: rgb(255, 244, 232);
}