el-table使用row-class-name属性点击某行显示白色高亮

前言 ：

       该方式只能通过获取该行索引并且对比实现，估计element-plus内部逻辑写的是循环，我也懒得去github上面看了，如果你企图传递该行的“序号”属性，那够你折腾排查原因的，我都快排查疯了才发现必须传递该行索引。

正确方式：

  <el-table
    :data="tableData"
    class="dark-table"
    :row-class-name="setRowClassName"
    @row-click="handleRowClick"
  >

// 定义一个响应式变量，用于存储当前选中行的索引，初始化为 null
const selectedRowIndex = ref<number | null>(null);

// 处理行点击事件的函数
const handleRowClick = (row: any) => {
  // 获取点击行在 tableData 中的索引
  const rowIndex = tableData.value.indexOf(row);
  // 如果当前选中行的索引与点击行的索引相同，则取消选中
  if (selectedRowIndex.value === rowIndex) {
    selectedRowIndex.value = null; // 取消高亮
  } else {
    // 否则，设置选中行为当前点击的行
    selectedRowIndex.value = rowIndex; // 设置高亮
  }
};

// 动态设置行样式的函数
const setRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  // 如果当前行的索引与选中行的索引相同，则返回 'highlight-row' 类名，用于高亮显示
  if (rowIndex === selectedRowIndex.value) {
    return 'highlight-row';
  }
  // 否则返回空字符串，表示不应用任何特殊样式
  return '';
};

这样可以实现点击显示高亮：

错误方式:

// 动态设置行样式的函数
const setRowClassName = ({row}:{ row: any}) => {
  console.log('当前样式序号：' + row);
  // 如果当前行的索引与选中行的索引相同，则返回 'highlight-row' 类名，用于高亮显示
  if (row.序号 === selectedRowIndex.value) {
    return 'highlight-row';
  }
  // 否则返回空字符串，表示不应用任何特殊样式
  return '';
};

点击:

显示，不显示高亮:

更正错误：

就在我刚刚写这篇博客的时候，突然又找到了正确打开方式,row是一个含有序号，报警位置信息等多种属性的对象，要row.序号才行:

// 动态设置行样式的函数
const setRowClassName = ({row}:{ row: any}) => {
  console.log('当前样式序号：' + row.序号);
  // 如果当前行的索引与选中行的索引相同，则返回 'highlight-row' 类名，用于高亮显示
  if (row.序号 === selectedRowIndex.value) {
    return 'highlight-row';
  }
  // 否则返回空字符串，表示不应用任何特殊样式
  return '';
};