vue elementui el-table表格 点击单元格添加选中样式

在Vue中使用Element UI的el-table组件时，可以通过添加一个事件监听器来处理单元格点击事件，并通过设置cell-class-name属性来为被点击的单元格添加样式。以下是一个简单的示例：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @cell-click="handleCellClick"
    :cell-class-name="cellClassName"
  >
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        // ...更多数据
      ],
      activeCell: null, // 存储被点击的单元格信息
    };
  },
  methods: {
    handleCellClick(row, column, cell, event) {
      this.activeCell = { rowIndex: row.$index, columnIndex: column.index };
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (this.activeCell && this.activeCell.rowIndex === rowIndex && this.activeCell.columnIndex === columnIndex) {
        return 'active-cell'; // 这里的样式名称需要你自己定义
      }
      return '';
    },
  },
};
</script>
 
<style>
/* 在这里定义 .active-cell 的样式 */
.active-cell {
  background-color: yellow; /* 选中单元格的背景色 */
  color: #333; /* 选中单元格的文本色 */
}
</style>

在上面的代码中，handleCellClick方法用于记录被点击的单元格信息，而cellClassName方法则根据记录的单元格信息为其添加样式。你需要在<style>标签中定义.active-cell的具体样式。