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>

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值