el-table 的选择框如何根据条件设置某项不可选中

效果如图:实现某条数据不可选,其他数据可选 

核心代码: <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>  在选择框的列上加上 :selectable="selectable" ,selectable是一个函数,返回值为false的时候,表格列禁止选中

<template>
    <div class="hello">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <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>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ]
        };
    },
    methods: {
        selectable(row, index) {
            // 这里可以根据具体业务逻辑判断,returnfalse就是不可选择,row为表格行数据
            // 设置第四行为不可选中
            if (index == 3) {
                return false;
            } else {
                return true;
            }
        }
    }
};
</script>
<style scoped>
</style>

最近更新

  1. TCP协议是安全的吗?

    2024-03-14 06:42:09       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-14 06:42:09       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-14 06:42:09       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-14 06:42:09       20 阅读

热门阅读

  1. 在linux中关于R包devtools的安装

    2024-03-14 06:42:09       22 阅读
  2. 服务器中间件的种类和日常使用

    2024-03-14 06:42:09       19 阅读
  3. Linux-轻量级数据库sqlite函数接口-016

    2024-03-14 06:42:09       20 阅读
  4. 网络安全等级保护2.0自查表 | 管理部分

    2024-03-14 06:42:09       17 阅读
  5. Unity WebGL ios 跳转URL

    2024-03-14 06:42:09       20 阅读
  6. 深入理解ngx_http_upstream_vnswrr_module负载均衡模块

    2024-03-14 06:42:09       18 阅读
  7. 亚马逊云科技 Lambda 运行selenium

    2024-03-14 06:42:09       21 阅读
  8. 突破编程_C++_设计模式(状态模式)

    2024-03-14 06:42:09       17 阅读
  9. 华为认证云计算专家(HCIE-Cloud Computing)--问答题

    2024-03-14 06:42:09       19 阅读