element table表格 多选中将行设置为不可选中

最新推荐文章于 2024-03-13 10:40:52 发布
原创 最新推荐文章于 2024-03-13 10:40:52 发布 · 2.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui

本文介绍如何在Element UI的表格组件中，通过设置type为'selection'的列的特定属性，实现根据方法checkSelect的返回值动态控制行的可选中状态。

在这里插入图片描述

            <el-table-column
              type="selection"
              :selectable="checkSelect"
              width="40"
            />

此属性必须加在 type为“selection”上
table属性中将其方法返回为true 为可选中 返回false 不可选中

方法checkSelect

    checkSelect(row) {
      return row.linenGroupCustomerId == null
    },
ElementUI - ＜el-table＞ 表格 selection 设置的复选框禁止选中某些行
🏆 前端领域优质创作者
07-23 1万+
前言 当表格设置 selection 开启复选框可选时，您可能需要禁用一些 业务条件成立 的行数据。 例如，禁用表格中所有 地址 为 秦皇岛市海港区居民 的行数据，复选框无法选中，如下图所示效果： 实现方法 表格文档：https://element.eleme.cn/#/zh-CN/component/table ElementUI 提供了该需求的解决方案，上述文档连接中打开搜索 selectable 。 该属性接收一个函数，您只需要在函数中做出判断，返回 ture / false 即可确定该行
《NX二次开发官方案例》专栏目录（上篇）
王牌飞行员_里海的博客
07-08 1727
专栏目录 【例2000】report assembly parts list callouts 列出装配体的部件清单和标注 【例1999】report assembly parts in top down order 报告装配体的顶层组件 【例1998】report assembly parts in bottom up order 自底向上报告装配零件 【例1997】report assem search directories 报告装配搜索目录 【例1996】report assem options
elementUI实现表格多选中指定某些行不能被选中
jiangjunyuan168的博客
09-01 4695
elementUI实现表格多选中指定某些行不能被选中
实现el-table的selection某些行不可选中
_小郑有点困了的博客
08-24 2275
实现el-table的selection某些行不可选中 背景： 有些行不可做批量操作，那直接不给他选就行了呀。 效果图： 代码实现： <el-table-column type="selection" :selectable="checkSelect" width="35"></el-table-column> //判断是否可选 checkSelect (row,index) { let isChecked = true; if (row.isRelati
element-UI非radio按钮单选Table表格(highlight-current-row),头部背景颜色更换以及默认某行不可选中不可高亮
drift_away_的博客
09-03 3043
1.首先大家现在查阅所有资料都可能无法找到关于highlight-current-row单选表格中的问题，这也是我在开发并且秃头的过程中踩过的好多坑，拿出来给大家分享分享。 首先并不是radio单选表格，而是这种带色块的单选表格 2.也就是配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为inde
elementui 的el-table设置不可勾选
DejaVus的博客
10-19 2711
el-table 勾选框禁用
Vue3 - Element Plus 表格组件 “手动“ 取消/选中勾选列，并同步更新表格复选框 UI 状态（el-table 表格组件中，通过代码手动控制某个列的选中与取消勾选，并且复选框跟着变）
06-04
首先，用户的问题是关于在Vue3和ElementPlus中使用el-table组件，通过代码手动控制行数据的选中和取消勾选状态，并确保复选框的UI状态同步更新。根据系统指令：-我必须使用中文回答。-所有行内数学表达式使用$...$...
如何在u-table、t-tr、u-td中新增单选框 且只能同时选择一条 获取选中行的数据
10-01
在表格中自定义一列，放置u-radio，绑定v-model为selectedId，并将value设置为行的唯一标识。 2. 为表格添加row-click事件（如果有的话），在事件中将当前行的唯一标识赋值给selectedId。 3. 在单选框上阻止点击...
eltable中选中某几行的某一列数据，如何在一个弹框中一行显示
最新发布
10-29
但用户当前的需求是：在el-table中选中多行，然后获取这些选中行的某一列数据，并在一个弹框中将这些数据在一行中显示。 分析用户需求： 1. 用户需要多选功能（可能通过复选框或选择列）。 2. 用户需要获取选中...
【Layui单元测试：编写与维护表格事件监听的测试用例】：确保你的Layui应用稳定可靠
文章首先介绍了Layui表格事件监听的基本概念和测试用例编写的理论基础，接着详细探讨了编写和运行测试用例的具体方法和步骤。此外，本文还深入分析了测试用例的维护、优化以及自动化测试实践、性能测试与优化、安全...
el-table 的选择框如何根据条件设置某项不可选中
前端笔记——放弃很容易,但坚持一定很酷
03-13 2585
核心代码： <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column> 在选择框的列上加上。，selectable是一个函数，返回值为false的时候，表格列禁止选中。效果如图：实现某条数据不可选，其他数据可选。
element-ui table中使用type=‘selection‘ 实现禁用，勾选，默认选中不可修改 三种状态显示问题
热门推荐
蓝胖子的博客
08-25 1万+
element-ui table中使用type='selection' 实现禁用，勾选，默认选中不可修改 三种状态显示问题
＜el-table＞ 表格 selection 设置的复选框禁止选中某些行
lucky_Mather的博客
11-17 538
表格 selection 设置的复选框禁止选中某些行
Element table表格的多选按钮 设置不可勾选的方法
weixin_48228930的博客
02-25 2418
项目场景： 因为项目需要，要对element ui中table表格加载时根据条件设置多选按钮是否可以勾选 解决方案： 通过封装selectable来实现 selectable 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 Function(row, index) <el-table :data="verificationListDialog" @selection-change="handleS
element表格 el-table-column type=“selection“ 禁止选中自定义
qq_37825514的博客
01-06 1774
【代码】element表格 el-table-column type="selection" 禁止选中自定义。
vue el-table设置符合条件的某些行不能选择
farmss的博客
09-27 3897
vue el-table设置符合条件的某些行不能选择，根据需求，第二次补充添加的时候，已经添加的项目需要置灰，不能再进行操作，未选择的可以继续添加。 根据一位前辈的经验（非常感谢），进行操作，终于成功了，特来记录一下，方便学习，下面是主要代码。 <el-table-column type="selection" :selectable="checkSelectable" width="60"> </el-table-
Element UI中el-table组件type=selection时CheckBox禁止选择
lee_uncle的博客
04-11 1262
Element UI中el-table组件type=selection时CheckBox禁止选择。
elementUI-table 设置禁止选中
zhangtongxueya的博客
05-09 1911
文档上写着 这个函数返回true 就可以选中；反之禁止选中 <el-table-column type="selection" :selectable="checkSelectable" width="55"></el-table-column> checkSelectable(row) { return !this.build_in && this.tableData.length !== 1 } ...
uniapp实现表格的多选功能
qq_48954899的博客
09-05 1151
uniapp实现多选勾选数据功能
element Plus table多选设置默认选中的列
10-16
在Element Plus的表格组件中实现多选时默认选中列，可参考以下思路： 首先，要让Element Plus的多选表格支持跨页，需在`el-table`设置`row-key`属性，然后在`type="selection"`的列设置`:reserve-selection="true"`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值