element table 多选禁用某一行,表头全选框去除

业务场景：多选表格某行不可选择

实现如下图效果：

话不多说，直接上代码

<el-table
 ref="multipleTable" 
 :data="tableData" 
 border 
 :header-cell-style="headerCellStyle" 
 stripe tooltip-effect="dark" 
 style="width: 100%" 
 @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" :selectable="selectable">
            </el-table-column>
            <el-table-column type="index" width="55" label="序号" align="center">
            </el-table-column>
            <el-table-column label="文件名" prop="name" align="center" :formatter="fieldFormatter">
            </el-table-column>
            <el-table-column label="文件附件" align="center" prop="appendixName">
                <template slot-scope="scope">
                     <a :class="scope.row.appendixName ? 'table-href' : ''" :href="scope.row.appendixUrl" target="_blank">{{ scope.row.appendixName || '-' }}</a>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="text"
                    v-if="!scope.row.isEdit && scope.row.isHidden"
                    @click="handleRecovery(scope.$index, scope.row)">恢复</el-button>
                    <el-button
                    size="mini"
                    type="text"
                    v-if="!scope.row.isEdit && !scope.row.isHidden"
                    @click="handleHide(scope.$index, scope.row)">列表隐藏</el-button>
                    <el-button
                    size="mini"
                    type="text"
                    @click="handleUp(scope.$index, scope.row)" v-if="scope.$index !== 0">上移</el-button>
                    <el-button
                    size="mini"
                    type="text"
                    @click="handleDown(scope.$index, scope.row)" v-if="scope.$index !== (tableData.length - 1)">下移</el-button>
                </template>
            </el-table-column>
        </el-table>

后端data返回数据

tableData: [
                {
                    appendixName: '1.请求书.pdf',
                    appendixUrl: '1.pdf',
                    id: 5,
                    isHidden: 0,
                    name: '123',
                    no: 0,
                    workId: 61
                },
                {
                    appendixName: '1.请求书.pdf',
                    appendixUrl: '2.pdf',
                    id: 5,
                    isHidden: 1,
                    name: '123',
                    no: 0,
                    workId: 61
                },
                {
                    appendixName: '1.请求书.pdf',
                    appendixUrl: '3.pdf',
                    id: 5,
                    isHidden: 1,
                    name: '123',
                    no: 0,
                    workId: 61
                },
                {
                    appendixName: '1.请求书.pdf',
                    appendixUrl: '4.pdf',
                    id: 5,
                    isHidden: 0,
                    name: '123',
                    no: 0,
                    workId: 61
                },
                {
                    appendixName: '1.请求书.pdf',
                    appendixUrl: '5.pdf',
                    id: 5,
                    isHidden: 0,
                    name: '123',
                    no: 0,
                    workId: 61
                }
            ]

调用方法

selectable (row, index) { // 禁用某一行
    return row.isHidden === 0 // isHidden 0-否 1-是 返回false不可选
},
headerCellStyle (row) { // 设置样式，隐藏头部checkbox全选框
    let sty = 'background:'#eef1f6',color:'#606266';' // 表头背景,字体颜色
    if (row.columnIndex === 0) {
        sty += 'text-indent: 1000px'
    }
    return sty
},

注意，selectable方法仅用于多选table表格有效，且需写在el-table-column上，返回false时禁用选择