element-plus el-table 点击单行修改背景色

需求描述：

element-plus + el-table 点击行选中并修改背景色+文字颜色

代码实现：

方法一：

重点：

• highlight-current-row

/* 选中某行时的背景色*/.el-table__body tr.current-row > td {color: #28A458;background: rgb(197, 213, 255) !important;}

element-plus 本身有给提供这个功能，而且比第二个方法更好用，第二个方法在有列固定的情况下，样式会不生效，所以建议直接用第一种

方法二：

重点：

• @row-click
• :row-style

const state = reactive({checkNumber: "",// 存储选中的})// 单击选中一行const handleSelect = (row: getRecordItem) => {state.checkNumber = row.checkNumber;// 我这里 checkNumber 是唯一的};// 更改选中行背景色const cellStyle = (row: any) => {if (state.checkNumber === row.row.checkNumber) {// 注意！！！这里是 row.row.checkNumberreturn {backgroundColor: "rgb(197, 213, 255) !important",color: "#28A458 !important",cursor: "pointer",};}return { cursor: "pointer" };};