element table根据条件隐藏复选框

在<el-table>标签加 :cell-class-name="cellClass"

在 <el-table-column type="selection">标签加:selectable="selectable" ，如果不加，会出现单元格复选框全部选中，但是表头复选框还是半选状态

 

<div id="app">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :cell-class-name="cellClass">
            <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>>
            <el-table-column label="日期" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
        </el-table>
    </div>

var app = new Vue({
        el: '#app',
        data: {
            tableData: [{
                checkStatus: 1,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                checkStatus: 1,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            multipleSelection: []
        },
        method: {
　　　　　　　　// 彻底隐藏
            cellClass({ row, columnIndex }) {
                if (row.checkStatus == 1) {
                    // 根据某个属性，添加样式，隐藏复选框
                    return "myCell";
                }
            },
　　　　　　　　// 显示，但不可选中
            selectable(row, index) {
                if (row.checkStatus != 1) {
                    return true
                } else {
                    return false
                }
            }
        }
    })

 

<style>
    .myCell .el-checkbox__input {
        display: none !important;
    }
</style>