vue element-ui table根据条件设置某一行的复选框选择为禁用状态：

àì夳堔傛蜴生んèń 2021-09-13 17:56 1094阅读 1赞

# vue element-ui table根据条件设置某一行的复选框选择为禁用状态： #

如图：根据条件，设置某行的复选框不可选，禁用  
![在这里插入图片描述][202012241519332.png]  
![在这里插入图片描述][20201224152013840.png]

解决方案：

给复选框一个事件： :selectable=“selectable”

<el-table
                ref="multipleTableBind"
                :row-style="{height: '10px'}"
                :data="applyInfoList"
                tooltip-effect="dark"
                show-overflow-tooltip
                @selection-change="handleSelectionChangeSubApi"
                border
                :header-cell-style="{background:'#eef1f6',color:'#606266'}" class="distance_style_top_20">
                
                <el-table-column
                  type="selection" width="55" :selectable="selectable">
                </el-table-column>
    
            </el-table>

methods中：  
row是改行所有信息：根据里边的信息，设置你的条件，然后让其禁用  
return false 是禁用  
return true 是可用

selectable(row,index){ 
      console.log("row==========")
      console.log(row.applyId)
      if(this.subscriberApiApplyIdAllStr.includes(row.applyId)){ 
        return false;
      }else{ 
        return true;
      }
    },

[202012241519332.png]: /images/20210913/90cebbd392d7459fb5d468eb969e7538.png
[20201224152013840.png]: /images/20210913/572ddaf7941143d8a18230d2b7e02cf9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1094人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 jQuery 为复选框设置“选中”

问题描述：我想做这样的事情来使用 jQuery 勾选 checkbox： $(".myCheckBox").checked(true); 或者 $

向右看齐/ 2024年03月31日 17:33/ 0 赞/ 88 阅读

相关 elementUI中table表格添加一列多选框（vue）

效果图如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

梦里梦外;/ 2022年11月26日 08:56/ 0 赞/ 1445 阅读

相关 HTML复选框设置为只读

这两种办法完美解决了复选框设置会变灰色的状况方法一 <input type="checkbox" onclick="return false;"/> 这

刺骨的言语ヽ痛彻心扉/ 2022年11月16日 00:59/ 0 赞/ 339 阅读

相关【easyUI】禁用datagrid&treegrid复选框

最近公司启动了新项目，所以一直在和客户谈需求，撰写前期的设计相关文档，博客也陷入了停滞阶段。刚好今天搜集了两个问题，搜集的过程也算是耗时不短，所以记录下来，以备后用。 1.

末蓝、/ 2022年09月26日 03:53/ 0 赞/ 385 阅读

相关 ElementUI - ＜el-table＞表格 selection 设置的复选框禁止选中某些行

前言 > 当表格设置 `selection` 开启复选框可选时，您可能需要禁用一些业务条件成立的行数据。例如，禁用表格中所有地址为 `秦皇岛市海港区居民` 的

布满荆棘的人生/ 2022年08月31日 05:57/ 0 赞/ 355 阅读

相关 jq实现复选框全选和反全选以及子复选框的状态改变父复选框状态的方法

html代码如下所示： <div> <label>

本是古典何须时尚/ 2022年06月05日 01:26/ 0 赞/ 305 阅读

相关 layui table获取复选框行中的值

总的来说就这一句代码 reportReload为渲染的table的id var checkStatus = layui.table.checkStatus

蔚落/ 2022年05月14日 10:08/ 0 赞/ 453 阅读

相关 javascript复选框的选择

复选框 <body> <input type="checkbox" id="dianji" checked="checked">

逃离我推掉我的手/ 2022年02月03日 06:36/ 0 赞/ 274 阅读

相关 vue element-ui table根据条件设置某一行的复选框选择为禁用状态：

vue element-ui table根据条件设置某一行的复选框选择为禁用状态：如图：根据条件，设置某行的复选框不可选，禁用 ![在这里插入图片描述][20201

àì夳堔傛蜴生んèń/ 2021年09月13日 17:56/ 1 赞/ 1095 阅读

相关 ElementUI 表格部分复选框禁用或隐藏

背景我们在使用 element ui 的 Table 组件构建带复选框的表格时，我们希望根据条件禁用或者隐藏某行选择框。如下图所示：

朱雀/ 2021年03月29日 11:59/ 0 赞/ 906 阅读