在<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>

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐