vue3使用Element Plus的el-table，高亮当前点击的单元格

在Vue 3中，要高亮当前点击的el-table单元格，可以使用el-table的cell-class-name属性来为单元格指定一个类名，然后通过CSS来实现高亮效果。以下是一个简单的示例：

1. 在Vue组件中定义一个方法来处理点击事件，并更新状态以记录当前点击的单元格信息。
2. 使用cell-class-name属性来为特定单元格添加一个类名。
3. 通过CSS为添加的类名定义高亮样式。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @cell-click="handleCellClick"
    :cell-class-name="tableCellClassName"
  >
    <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 setup>
import { ref } from 'vue';
 
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  // ... more data
]);
 
const activeCell = ref(null);
 
const handleCellClick = (row, column, cell, event) => {
  activeCell.value = { rowIndex: row.$index, columnIndex: column.index };
};
 
const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (activeCell.value?.rowIndex === rowIndex && activeCell.value?.columnIndex === columnIndex) {
    return 'active-cell';
  }
};
</script>
 
<style>
/* 添加高亮样式 */
.active-cell {
  background-color: yellow;
}
</style>

在上述代码中，handleCellClick方法记录了当前点击的单元格信息，tableCellClassName方法根据当前激活的单元格信息为其添加一个active-cell类名，从而实现高亮显示。CSS部分定义了.active-cell类，当单元格具有这个类时，将会应用相应的样式（例如背景色高亮显示）。