ElementUI表格选中多行改背景颜色
设置: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); }