今天刚接收了需求老师的新的界面图,发现有的表格取消了全选的功能。
一、实现效果
二、实现方法
1.在<el-table>
里添加
<el-table-column type="selection" width="55">
2.此时表格里有单选框和多选框,在el-table里面添加cell-class-name属性
<el-table :data="tabData" border :header-cell-style="{ background: '#fafafa' }" :header-cell-class-name="cellClass">
cellClass(row) {
if (row.columnIndex === 0) {
//若是第一行,即全选框所在的那一行
return 'disabledCheck'
}
},
表示给表头添加了一个class
3.设置class来隐藏全选框
.el-table /deep/.disabledCheck .cell .el-checkbox__inner {
display: none !important;
}
.el-table /deep/.disabledCheck .cell:before {
content: "";
position: absolute;
right: 11px;
}