element-UI table 多选框添加条件禁用

qq_Girl200

于 2021-09-02 16:19:40 发布

阅读量380

点赞数

CC 4.0 BY-SA版权

分类专栏： vue项目开发文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_42103673/article/details/120064057

vue项目开发专栏收录该内容

31 篇文章

订阅专栏

本文介绍了如何在Vue.js表格组件中通过`selectable`方法实现根据角色名限制用户选择，仅管理员和系统管理员角色被禁止选中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <el-table
            :data="tableData"
            height="454"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" min-width="5%" :selectable="selectable"></el-table-column>
            <el-table-column
                v-if="isShowCol.roleName"
                :show-overflow-tooltip="true"
                prop="roleName"
                label="角色名称"
                min-width="8%"
            ></el-table-column>
</table>

方法中：
返回true可选，返回false禁止选中。

 selectable( row, index) {
            if( (row.roleName === '管理员') || (row.roleName === '系统管理员')) {
                return false;
            }else {
                return true;
            }   
  }