Element Plus表格行样式设置无效的解决办法

在Vue的单文件组件中，<style scoped>会将样式限制在当前组件的DOM中，并在选择器后面自动添加独特的属性选择器（例如data-v-xxxxx），以避免样式“泄露”到其他组件中。但在<el-table>的情况下，这种作用域限制可能会导致某些样式不生效，特别是像行样式这样需要直接作用于表格内部结构的样式。

解决方案

1. 去掉scoped：
   将<style scoped>改为<style>，使样式成为全局样式，以确保它能正常应用到<el-table>的行上。

   <style>
   .el-table .warning-row {
       background-color: var(--el-color-warning-light-9);
   }
   
   .el-table .success-row {
       background-color: var(--el-color-success-light-9);
   }
   </style>
   

2. 使用深度选择器（如果你必须保留scoped）：
   如果样式作用域确实需要限制在当前组件，可以使用深度选择器（>>> 或 /deep/）来突破scoped限制，让样式作用到子组件的内部结构：

   <style scoped>
   .el-table >>> .warning-row {
       background-color: var(--el-color-warning-light-9);
   }
   
   .el-table >>> .success-row {
       background-color: var(--el-color-success-light-9);
   }
   </style>
   

   或者，在Vue 3中使用：

   <style scoped>
   .el-table ::v-deep .warning-row {
       background-color: var(--el-color-warning-light-9);
   }
   
   .el-table ::v-deep .success-row {
       background-color: var(--el-color-success-light-9);
   }
   </style>
   

通过去掉scoped或使用深度选择器，你的自定义行样式应该能正确地应用到el-table中指定的行上。