el-table的隔行变色不影响row-class-name的背景色

EL-Table 的 stripe 属性和 row-class-name 属性同时存在时，浏览器中应用的 CSS 样式后者可能被前者覆盖，导致自定义行背景色不生效。

解决方案

方法一：CSS 样式覆盖（推荐）

通过 CSS 选择器赋予更高的特异性或使用 !important 来覆盖默认的斑马纹样式。

1. 在表格组件中去掉 stripe 属性 ，仅使用 row-class-name。

   <el-table :data="tableData" :row-class-name="tableRowClassName">
     <!-- 表格列定义 -->
   </el-table>

2. 在 methods 中定义 tableRowClassName 方法，根据条件返回自定义的类名14。

   methods: {
     tableRowClassName({ row, rowIndex }) {
       // 根据行数据 row 或行索引 rowIndex 判断
       if (row.yourField === 'someCondition') { 
         return 'your-custom-row-class'; // 返回自定义类名
       }
       // 甚至可以在这里实现隔行变色:cite[2]
       if (rowIndex % 2 === 0) {
         return 'even-row'; // 偶数行类名
       } else {
         return 'odd-row';  // 奇数行类名
       }
       return ''; 
     }
   }

3. 在样式中定义你的自定义类，并确保使用 !important 提高优先级 5。

   <style scoped>
   /* 使用 /deep/ 或 >>> 深度选择器（注意 Vue 版本和预处理器支持） */
   /* 对于 Vue 2 且使用 CSS 时，可以考虑 >>> */
   /* .your-custom-row-class >>> .el-table__body tr.your-custom-row-class > td */
   
   /* 更稳妥或 Vue 3 项目中使用 :deep() */
   :deep(.el-table__body) tr.your-custom-row-class > td {
     background-color: #ffdcdc !important; /* 你的自定义颜色 */
   }
   /* 如果你在 tableRowClassName 中也处理了隔行变色 */
   :deep(.el-table__body) tr.even-row > td {
     background-color: #f0f9eb !important; 
   }
   :deep(.el-table__body) tr.odd-row > td {
     background-color: oldlace !important; 
   }
   </style>

   💡 提示 ：使用 Scoped 样式时，要使用深度选择器（如 /deep/、>>>、:deep()）来穿透组件作用域。

方法二：使用 cell-style 方法实现隔行变色

将隔行变色和特殊行样式的逻辑分离开。

1. 不使用 stripe 属性 ，使用 cell-style 属性实现基础的隔行变色6。

   <el-table 
     :data="tableData" 
     :cell-style="rowStyle" 
     :row-class-name="tableRowClassName">
     <!-- 表格列定义 -->
   </el-table>

2. 在 methods 中分别定义 rowStyle 和 tableRowClassName 方法。

   methods: {
     // 处理隔行变色
     rowStyle({ row, rowIndex }) {
       if (rowIndex % 2 === 0) {
         return { 
           'background-color': '#f5f7fa', // 偶数行样式
           // 其他样式...
         };
       } else {
         return {
           'background-color': '#ffffff', // 奇数行样式或默认
           // 其他样式...
         };
       }
     },
     // 处理特定行背景色
     tableRowClassName({ row, rowIndex }) {
       if (row.yourField === 'someCondition') {
         return 'your-custom-row-class'; // 仅为特殊行返回类名
       }
       return '';
     }
   }

3. 在样式中定义 your-custom-row-class，由于隔行变色由 cell-style 控制，冲突概率降低，但必要时仍可加强制 !important。

   <style scoped>
   :deep(.el-table__body) tr.your-custom-row-class > td {
     background-color: #ffdcdc !important; /* 特殊行颜色 */
   }
   </style>

方法三：自定义斑马纹样式

直接修改 stripe 属性自带的斑马纹样式，使其与你自定义的行样式兼容。

1. 保留 stripe 属性。

   <el-table :data="tableData" stripe :row-class-name="tableRowClassName">
     <!-- 表格列定义 -->
   </el-table>

2. 在你的样式文件中（全局或使用深度选择器在组件内），覆盖 Element UI 默认的斑马纹样式。

   <style scoped>
   /* 修改默认的斑马纹颜色，避免与自定义行样式冲突 */
   :deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
     background-color: your-even-row-color; /* 你希望的偶数行颜色 */
   }
   /* 定义你的特殊行样式，仍需较高优先级 */
   :deep(.el-table__body) tr.your-custom-row-class > td {
     background-color: #ffdcdc !important;
   }
   </style>

   这种方法需要你清楚默认斑马纹的 CSS 类名3。

---

⚠️ 注意事项

• 样式作用域 (Scoped Styles) ：在使用 <style scoped> 时，要想覆盖子组件样式，通常需要使用深度选择器，如 /deep/、>>> 或 :deep()。

• !important 的使用 ：为了提高自定义样式优先级以覆盖 Element UI 的默认样式，!important 通常是有效的，但应谨慎使用以避免其他样式问题。

• stripe 与 row-class-name 的冲突 ：请注意，同时启用 stripe 和 row-class-name 属性，确实可能导致斑马纹样式覆盖自定义的行样式 。这是因为 Element UI 内部样式定义的优先级问题。因此，最根本的解决方法往往是避免同时使用两者，而是选择上述方法之一来实现隔行变色或特殊行样式的需求。