el-table 复选框根据状态显示是否禁止选择

一、需求

操作状态是已加入，左侧复选框为选中状态且禁止操作；

二、功能实现

翻看elmentPlus el-table的api发现有个selectable方法，通过返回值（true/false）来判断这一行checkbox是否可选

实现功能

const selectable = (row, index) => {
    //伪代码
    return row.isJoin == 0;
}

效果展示

这时我们发现checkbox只是处于无法选中的状态并没有勾选上对号；查找了网上的一些方案，都是要把数据循环根据状态设置选中tableRef.value.toggleRowSelection(row, true);,这样每切换一次分页都要操作一次数据。 本篇文章另辟蹊径，采用通过css设置选中效果。通过观察table表格的html我们发现禁止选中的checkbox有个is-disabled类名，我们通过这类名来加相关样式实现我们需要的功能；

注意：最好带上外部div或者table的类名，不然会影响全局样式；

样式：长方形的一角，然后旋转45度，就是一个对号啦

 .el-checkbox__input.is-disabled .el-checkbox__inner {
        background-color: #e8e8e9;
 }
    
.el-checkbox__input.is-disabled .el-checkbox__inner::after {
    content: "";
    border: 1px solid transparent;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform .15s ease-in 50ms;
    transform-origin: center;
    transform: rotate(45deg) scaleY(1);
    border-color: rgb(155, 154, 154) !important;
}

最终效果