ElementUi中el-table组件使用row-class-name修改指定行颜色

史上最菜开发

于 2024-05-11 17:54:41 发布

阅读量396

点赞数 5

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/weixin_45849417/article/details/138724820

版权

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

注意：如果在el-table中使用了stripe这个属性，这个属性是带斑马纹的表格样式，它和row-class-name共存时是没有效果。

这个确实要说三遍，很多人设置了不生效的原因就是这个。
使用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;

}

下面的就是官网的例子

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

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

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>