vue3 + ElementUI Plus 碰见的Table中row-class-name问题

在Vue 3和Element Plus中，如果你遇到了row-class-name的问题，很可能是因为你在使用<el-table>组件时，传入了一个不正确的row-class-name属性。

row-class-name属性用于给表格中的行添加自定义类名，它接受一个函数，该函数会传入一个参数对象，包含每一行的数据和行索引，根据这些信息你可以返回一个字符串作为类名。

解决方法：

1. 确保你传给row-class-name的是一个函数，而不是字符串。
2. 检查该函数返回的字符串是否符合类名的命名规则，即不包含特殊字符，不以数字开头等。
3. 确保你的自定义类名已经在你的样式文件中定义好了。

示例代码：

<template>
  <el-table
    :data="tableData"
    row-class-name="tableRowClassName"
  >
    <!-- table columns -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...your data
      ]
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'highlight-row';
      } else {
        return '';
      }
    }
  }
};
</script>
 
<style>
.highlight-row {
  background-color: yellow;
}
</style>

在这个例子中，tableRowClassName方法决定了哪一行会被添加highlight-row类，从而实现高亮显示。确保你的方法逻辑正确，并且相关的CSS类已经定义在你的样式文件中。