element-ui table中使用type=‘selection‘ 实现禁用，勾选，默认选中不可修改 三种状态显示问题

需求
1.status=‘CheckOk' 时 勾选框默认选中但不可修改勾选状态
2.status=‘CheckFail' 时 勾选框禁用
3.status=‘' 时 勾选框可以勾选

实现思路
采用el-table表格自带的勾选框type=‘selection’ 实现

实现 1.status=‘CheckOk' 时 勾选框默认选中但不可修改勾选状态

首先要实现默认选中
toggleRowSelection: 有两个参数（row, selected）
用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

methods：{
        // status=‘CheckOk' 默认选中
     defaultChecked() {
            var that = this;
            that.$nextTick(() => {
                this.tableData.forEach((v, i) => {
                    if (v.status == 'CheckOk') {
                        this.$refs.table.toggleRowSelection(v, true);
                    }
                });

            });
           } 
   },

将表格列的type类型设置为selection，添加:selectable='方法名’

<el-table-column type="selection" width="50" :selectable="selectable" />

methods: {
     //判断勾选
        selectable(row, index) {
            if (row.status == 'CheckFail' || row.status == 'CheckOk') {
                return false;
            } else {
                return true;
            }
        },
}

完整代码

<el-table ref="table" 
               :header-cell-style="{ color: '#FFF', background: '#333' }" 
               :data="tableData"
               style="width: 100%" :row-key="getRowKey" 
               :row-style="tableRowStyle"
               @selection-change="handleSelectionChange">
        <template slot="empty">
            <span style="color: #969799">{{ $t("NeoLight.empty") }}</span>
        </template>
        <el-table-column type="selection" width="50" :selectable="selectable" />
        <el-table-column prop="ri" :label="$t('outSideShelf.ri')" />
        <el-table-column prop="needNum" :label="$t('outSideShelf.needNum')" />
        <el-table-column prop="status" :label="$t('outSideShelf.status')" />
</el-table>

vue3

<el-table-column align="center" type="selection" :selectable="selectable" width="55" />

  // 取消的订单不让选中
  const selectable = (row : { orderStatus : number; }, index : any) => {
    if (row.orderStatus == -1) {
      return false;
    } else {
      return true;
    }
  }