在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)效果