控制行颜色样式

基础用法

属性	值	说明
:row_class_name	函数名	传入一个函数，用于指定行的样式

在“style”中定义好不同样式的 class属性。

html示例：

<yui-table
    :rowData="rowData.filter(data => !search || data.userId.toLowerCase().includes(search.toLowerCase()))"
    :headerData="headerData数据对象"
    :controlAtrr="controlAtrr数据对象"
    :row_class_name="tableRowClassName"
>
</yui-table>

vue.js示例

<script lang="ts">
  methods: {
      // 表格className方法触发
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 0) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
  }

  },

</script>

css 示例

<style lang="less" scoped>
  /deep/ .el-table .warning-row {
    background: oldlace;
  }

  /deep/ .el-table .success-row {
    background: #8cf9cd;
  }

</style>

效果

注意事项

带状态表格不对固定位置的列生效，示例中“日期”列为固定位置列