实现el-table的selection某些行不可选中

最新推荐文章于 2024-06-22 17:04:48 发布
原创 最新推荐文章于 2024-06-22 17:04:48 发布 · 2.2k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #elementui

本文介绍如何在Vue项目中使用Element UI的表格组件（el-table）实现特定行不可选中的功能。通过设置`selectable`属性并定义一个判断函数`checkSelect`，可以根据行数据动态控制行是否可被选中。例如，当行数据中存在特定参数（如`isRelation`）时，该行将不可被选中。

实现el-table的selection某些行不可选中

背景：

有些行不可做批量操作，那直接不给他选就行了呀。

效果图：

在这里插入图片描述

代码实现：
<el-table-column type="selection" :selectable="checkSelect" width="35"></el-table-column>

//判断是否可选
  checkSelect
最低0.47元/天 解锁文章
ElementUI - ＜el-table＞ 表格 selection 设置的复选框禁止选中某些行
🏆 前端领域优质创作者
07-23 1万+
前言 当表格设置 selection 开启复选框可选时，您可能需要禁用一些 业务条件成立 的行数据。 例如，禁用表格中所有 地址 为 秦皇岛市海港区居民 的行数据，复选框无法选中，如下图所示效果： 实现方法 表格文档：https://element.eleme.cn/#/zh-CN/component/table ElementUI 提供了该需求的解决方案，上述文档连接中打开搜索 selectable 。 该属性接收一个函数，您只需要在函数中做出判断，返回 ture / false 即可确定该行
[套路] el-table 多选属性实现单选效果
weixin_43558927的博客
12-29 1348
el-table单选通过点击行, 再加高亮显示, 不清晰, 多选通过第一列的checkbox选中, 比较直观, 但不支持单选模式, 本文提供一个套路化无脑实现. 套路系列意在提供一个工具文档, 查就完了.
【Element UI样式优化】el-table多选行的实现 ==＞ 批量删除功能 ==＞ el-table含有不可选中行
Sabrina_cc的博客
06-06 6220
ElementUI 提供了多选行table，同时若依框架也提供了成熟的多选表格。本文主要展示批量删除功能，以及多选行有不可选 2.添加selection-change ids用来保存select选中的行id；并使用single和mutiple记录选中情况。 二、实现批量删除功能 只有是multiple时，表示开启多选模式，才可以使用批量删除按钮 2.删除函数撰写 批量删除和行删除公用一个删除函数，通过是否有传参来区分。使用confirm二次确认。并最终调接口实现功能。 三、含有
el-table-column type=“selection“单选框控制有些可选有些无法选中（vue2 element）
weixin_46965237的博客
06-22 2397
el-table-column type="selection"单选框控制有些可选有些无法选中（vue2 element）
vue element el-table 禁止勾选
CvLebron的博客
03-08 1721
【代码】vue element el-table 禁止勾选。
el-table 中嵌入 el-select，选中失效问题记录
LiangHui0914的博客
11-02 2313
el-table 中嵌入 el-select，选中失效问题记录
记一个vue 在el-table内嵌套el-select 无法点击选择的BUG解决办法
PiaoMiaoXiaodao的博客
02-04 5716
代码片段如下 正常情况下 我以为 压根不需要什么@change事件 按道理他自然就能修改表格下 行内的单元格数据 然而想法太美好了,浪费了我2个小时 期间找了N多办法没解决 如change内调用$forceUpdate $set之类的 BUG现象是这样的: el-select 怎么点击都无反应 但初始值是正常的 F12插件查看 父组件 el-table的属性 显示结果已经改变了 ch...
el-table-column selection 默认选中
03-07
默认情况下，el-table-column的selection属性是false，即不可选中。 如果你想要设置el-table-column的selection默认选中，可以通过以下步骤实现： 1. 在el-table-column上添加selection属性，并将其设置为true，...
ElementUI el-select 选项无法选择的问题
千里之行，始于足下！
01-04 1万+
一、问题描述：今天测试反馈了一个bug：修改用户操作面板上，点击多选的下拉选择框（el-select）弹出面板–>点击选中或取消选中其中的选择项—>点击无反应 <el-dialog title="修改用户" :visible.sync="open" width="600px" append-to-body> .... <el-form-item label="企业可见权限" prop="clientUnitIds"> <el-sele
vue el-table设置某些行不能选择以及特殊样式
且听风吟的博客
12-14 4748
el-table设置某些行特殊样式
element表格 el-table-column type=“selection“ 禁止选中自定义
qq_37825514的博客
01-06 1783
【代码】element表格 el-table-column type="selection" 禁止选中自定义。
elementui 的el-table设置不可勾选
DejaVus的博客
10-19 2730
el-table 勾选框禁用
element-ui 中标签el-select选中无反应问题
HelloWord176的博客
06-20 5941
el-select标签，如果外部还嵌套循环，点击选中标签无反应，删除也不好使， 原因由于层次太多，导致render函数没有自动更新； 在el-select标签内加入 @change=“$forceUpdate()” ，强制刷新视图即可。
element table表格 多选中将行设置为不可选中
xiaojiakun的博客
08-26 2466
<el-table-column type="selection" :selectable="checkSelect" width="40" /> 此属性必须加在 type为“selection”上 table属性中将其方法返回为true 为可选中 返回false 不可选中 方法checkSelect checkSelect(row) { ...
Vue element-ui如何给table表格的一行设置为不可勾选，input不可修改
七月❤的博客
06-07 2826
【代码】Vue element-ui如何给table表格的一行设置为不可勾选，input不可修改。
el-table 的选择框如何根据条件设置某项不可选中
前端笔记——放弃很容易,但坚持一定很酷
03-13 2621
核心代码： <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column> 在选择框的列上加上。，selectable是一个函数，返回值为false的时候，表格列禁止选中。效果如图：实现某条数据不可选，其他数据可选。
elementUI表格多选，默认个别行不能选中
qq_42704540的博客
10-27 1692
element 表格，多选时，默认某些行不能选中 <el-table-column type="selection" align="center" width="55" :selectable="selectEnable" // 设置 ></el-table-column> // 升级成功，不能勾选 selectEnable(row, rowIndex) { i...
element-ui el-table表格勾选框条件禁用，及全勾选按钮禁用， 记录
热门推荐
xh1506101064的博客
01-12 1万+
表格的部分内容是可以被勾选的，部分内容是不可以被勾选的使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的。
Element table表格的多选按钮 设置不可勾选的方法
weixin_48228930的博客
02-25 2421
项目场景： 因为项目需要，要对element ui中table表格加载时根据条件设置多选按钮是否可以勾选 解决方案： 通过封装selectable来实现 selectable 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 Function(row, index) <el-table :data="verificationListDialog" @selection-change="handleS
el-table selection回显不可选
最新发布
02-28
### 解决 `el-table` 中 `selection` 列回显时不可选的问题 当处理 `el-table` 的 `selection` 列时，如果遇到回显状态下选项无法被选择的情况，通常是因为数据绑定或事件监听存在问题。为了确保 `selection` 列...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_小郑有点困了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值