vue3 el-table row-class-name 行字体颜色失效

在使用 Vue 3 中的 el-table 组件时，如果你遇到了 row-class-name 属性设置的行颜色失效，并被 el-table 的默认样式覆盖的问题，通常是因为 CSS 优先级或者样式冲突导致的。这里有几个方法可以帮助你解决这个问题：

1. 增加 CSS 优先级

确保你的行样式优先级高于 Element Plus 的默认样式。你可以通过添加更具体的选择器或者在样式中增加 !important 来提高优先级。例如：

/* 确保你的选择器比 Element Plus 的选择器更具体 */
.your-table .el-table__row {
  /* 你的样式 */
}
 
/* 或者使用 !important */
.your-table .el-table__row {
  background-color: #f0f0f0 !important;
}

2. 使用 deep 或 ::v-deep 选择器

如果你在使用 Vue 3 和 SCSS/SASS，可以使用 ::v-deep 选择器来确保你的样式能够穿透组件的封装边界：

::v-deep .el-table .el-table__row {
  background-color: #f0f0f0;
}

3. 动态绑定 rowClassName

如果你正在使用 row-class-name 属性，确保它是正确绑定的，并且返回正确的类名。例如：

<template>
  <el-table :data="tableData" :row-class-name="setRowClassName">
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  methods: {
    setRowClassName({row, rowIndex}) {
      if (row.someCondition) {
        return 'highlight-row'; // 确保有这个类在你的CSS中定义了正确的样式
      }
      return '';
    }
  }
}
</script>
 
<style>
.highlight-row {
  background-color: #f0f0f0; /* 或者其他你希望的样式 */
}
</style>

4. 检查 Element Plus 的版本和文档

确保你使用的是 Element Plus 的正确版本，因为不同版本之间可能会有细微的差异或者已知的问题。同时，查看 Element Plus 的官方文档，看看是否有关于 rowClassName 或类似属性的特别说明。

5. 使用内联样式（不推荐，除非作为临时解决方案）

虽然不推荐，但在某些情况下，你可以直接在 rowClassName 方法中返回一个内联样式对象：

setRowClassName({ row, rowIndex }) {
  if (row.someCondition) {
    return 'background-color: #f0f0f0;'; // 注意这里是字符串形式的样式，不是类名
  }
  return '';
}

但通常最好还是使用类名来定义样式，因为这样可以保持样式的可维护性和复用性。

通过上述方法，你应该能够解决 el-table 中 row-class-name 行颜色失效的问题。如果问题仍然存在，可能需要检查是否有其他 CSS 规则（如外部样式表或全局样式）影响了你的行样式。