举例:列表有3条数据 [{aa:0},{aa:1},{aa:0}]
假如 我选择了第一条数据,第二条数据的选择框将被隐藏,第三条数据的选择框保留
假如 我选择了第二条数据,第一条和第三条数据为不可选状态。
1、隐藏表头的全选择框
<el-table :header-cell-class-name="leftHeaderStyle">
<el-table-column type="selection"></el-table-column>
</el-table>
leftHeaderStyle({row,columnIndex}){
if(columnIndex===0){
return 'seltAllBtnDis'
}
}
:v-deep .seltAllBtnDis .cell{
visibility:hidden;
}
2、根据所选择的数据 更改其他数据的可选状态
<el-table :header-cell-class-name="leftHeaderStyle" :cell-class-name="getCellClasssName">
<el-table-column type="selection"></el-table-column>
</el-table>
getCellClassName({row,column}){
//判断条件
if(条件){
return 'select-row'
}
return '';
}
:v-deep .select-row .el-checkbox__input{
display:none;
pointer-events:none;
}
效果图,图一 是没选时的选择框状态,图二时选择了一条后的状态,根据 是 否 来判断选择框是否显示