el-table点击高亮当前单元格_el-table点击行当前行高亮

1、使用 cell-class-name 属性为表格中的每个单元格动态指定样式类

2、单元格上添加点击事件处理程序。您可以使用这个方法来更新highlightedCell数据属性并触发重新渲染表格，从而显示新的高亮单元格

<el-table :data="tableData" highlight-current-row="false" :cell-class-name="setCellClass" @cell-click="handleCellClick"></el-table>

data() {

return {

highlightedCell: null, // 保存当前高亮单元格的索引

tableData: [ { name: 'John', age: 20 }, { name: 'Jane', age: 30 }, { name: 'Joe', age: 40 }, ],

};

},

setCellClass(rowIndex, columnIndex) {

        

        row.index = rowIndex;

       column.index = columnIndex;

        const isHighlighted = this.highlightedCell && this.highlightedCell.rowIndex === rowIndex &&         this.highlightedCell.columnIndex === columnIndex;

        return isHighlighted ? ['highlight'] : [];

},

handleCellClick(row, column, event) {

        this.highlightedCell = { rowIndex: row.$index, columnIndex: column.index };

},

最后定义一个'highlight'的style样式，注意elementui本身样式

::v-deep .highlight {

  border: 1px solid red !important;

}