前端基础学习-el-table改变行样式以及根据条件隐藏复选框

在element-ui中的el-table给我们提供了很多属性，我们可以根据这些属性，条件显示各种样式

这一次主要讲用到的两个属性，分别是row-class-name还有cell-class-name

1、row-class-name改变行样式

（1）在table中绑定row-class-name

:row-class-name="tableRowClassName"

（2）methods添加方法

    /** 修改表格行样式 */
    tableRowClassName ({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
      return ''
    },

(3)修改对应样式

// 表格行样式
.el-table .warning-row {
  background: oldlace;
}

（4）效果

2、cell-class-name隐藏复选框

（1）table绑定cell-class-name

:cell-class-name="checkboxClassName"

（2）methods添加方法

    /** 根据调解隐藏复选框 */
    checkboxClassName ({ row, column, rowIndex, columnIndex }) {
      if (row.stars < 3) {
        return 'tb_cell'
      }
    }

（3）修改对应样式

// 隐藏复选框
.tb_cell .el-checkbox__input{
  display: none
}

（4）效果