Vue+Element el-table属性row-class-name用法及踩坑

el-table属性row-class-name用法及踩坑

需求前提：想要给表格的某一行加上不同的background，用来区分当前行的状态

• 根据官方给出的文档官方文档

  • 在el-table中绑定自定义属性row-class-name

     <el-table
     :data="tableData"
     style="width: 100%"
     :row-class-name="tableRowClassName">
    </el-table>
    

  • 在methods中定义方法,这里用来给某一行的状态加上class

    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    }
    
    

  • 给自己定义的class设置样式

   <style>
      .el-table .warning-row {
        background: oldlace;
      }
    
      .el-table .success-row {
        background: #f0f9eb;
      }
    </style>
  

踩坑笔记

• 使用row.userName 等变量时，值为undefined，这时候要看看在tableRowClassName方法内，参数是个对象，所以要解构再使用啊！
  
• 使用后没有效果的问题！！！！！

  • 第一步： 看看class有没有加上去

  • 第二步： 如果class都加上去了也没有效果，看一下有没有使用stripe这个属性，这个属性是带斑马纹的表格样式，它和row-class-name共存时是没有效果滴

  • 第三步：如果你也没有使用到stripe这个属性，那就要找样式的问题啦

    • 使用scoped设置了样式作用域 ,这个会影响到class的样式

    • 可以尝试使用/deep/深度选择器,必须在sass或less下

      /deep/ .el-table .warning-row {
          background: oldlace;
        }
      
      /deep/ .el-table .success-row {
          background: #f0f9eb;
        }
      

    • 使用 >>>深度选择器，只支持css

      .el-table >>> .warning-row {
        background: oldlace;
      }
      .el-table >>> .success-row {
        background: #f0f9eb;
      }
      

以上仅为个人理解，欢迎各位大佬批评指正！！！！