element中table多选功能禁止选择某一项

最新推荐文章于 2025-04-14 14:34:18 发布
最新推荐文章于 2025-04-14 14:34:18 发布
阅读量5.2k 收藏 9
点赞数 4
文章标签： vue.js elementui 前端 javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lll19960406/article/details/126641769
版权
本文介绍如何在Element-UI的table组件中实现特定列的禁止选择功能，通过提供自定义selectable函数来决定行的可选状态，适合希望限制某些列用户操作的情况。

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

element-ui中的table的多选很好用，但是如果其中某一项禁止选择，该怎样操作呢

在官方文档中，有一个这样的属性，可以控制是否禁止选择

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

selectable(row,index){
                 return row.sex==2//为true的时候可以选，为false则不可选择
}
冰晨之露
关注
elementUI多选框已选内容禁止再次勾选
C_TopTopTop的博客
03-04 918
<el-table :data="dataList" class="common-table" border empty-text="数据为空" @selection-change="handleSelectionChange"> <el-table-column label="编号" width="150" prop="id" header-align="center" align="center"></el-table-column&gt...
【Element UI样式优化】el-table多选行的实现 ==＞ 批量删除功能 ==＞ el-table含有不可选中行
Sabrina_cc的博客
06-06 6152
ElementUI 提供了多选行table，同时若依框架也提供了成熟的多选表格。本文主要展示批量删除功能，以及多选行有不可选 2.添加selection-change ids用来保存select选中的行id；并使用single和mutiple记录选中情况。 二、实现批量删除功能 只有是multiple时，表示开启多选模式，才可以使用批量删除按钮 2.删除函数撰写 批量删除和行删除公用一个删除函数，通过是否有传参来区分。使用confirm二次确认。并最终调接口实现功能。 三、含有
element-ui table之选择框禁止选中
热门推荐
qq_36437172的博客
08-10 2万+
需求场景：当我们对列表中一下数据选中后，调用接口处理数据中的状态，而对于已经处理了的数据，则不能再次进行处理。可能你首先想到的通过选中的数据，将其中的已处理数据过滤掉。这里我们通过已处理的数据，我们将禁止选中，那怎样才能实现呢？ 首先我们实现多选: 手动添加一个el-table-column，设type属性为selection即可； 然后设置 selectable 属性来决定该行数据是否选中。...
el-table 复选框全部禁用时实现全选禁用
最新发布
qq_51201589的博客
04-14 421
第一步 自定义表头样式。 第二步 自定义全选函数。
element-ui el-table表格勾选框条件禁用，及全勾选按钮禁用， 记录
xh1506101064的博客
01-12 1万+
表格的部分内容是可以被勾选的，部分内容是不可以被勾选的使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的。
vue element el-table 禁止勾选
CvLebron的博客
03-08 1558
【代码】vue element el-table 禁止勾选。
element-ui table选择框禁止选中
吴冬雪的博客
04-11 2914
需求场景：当我们对列表中一下数据选中后，调用接口处理数据中的状态，而对于已经处理了的数据，则不能再次进行处理。可能你首先想到的通过选中的数据，将其中的已处理数据过滤掉。这里我们通过已处理的数据，我们将禁止选中，那怎样才能实现呢？首先我们实现多选: 手动添加一个el-table-column，设type属性为selection即可；然后设置 selectable 属性来决定该行数据是否选中。若返回为 true， 则可以选中，否则禁止选中。
详解使用element-ui table组件的筛选功能的一个小坑
10-17
在Element UI框架中，`el-table`组件是一个强大的表格组件，提供了丰富的功能，包括筛选功能。在实际开发中，我们可能会遇到一些小问题，比如在尝试实现自定义模板与筛选功能相结合时，可能会遇到筛选不生效的问题。...
element ui 多选表格 禁止选择
11-19
如果你想在 Element UI 的多选表格中禁止用户选择所有或某些特定的数据项，可以通过设置表头中的 `type` 和 `formatter` 属性来实现。 1. 在表头单元格上禁用多选： 可以将表头单元格的 `type` 设置为 `'selection...
Element ui table多选，多选数据删除后，数据回显
qq_15736697的博客
01-28 1821
在el-table中，需要绑定@selection-change事件，:row-key属性， 以及添加勾选框 <el-table ref="singleTable" :data="tableData" highlight-current-row @selection-change="handleSelectionChange" :row-key="getRowKeys" style="width: 100%"> <!--@selection-c..
element-ui组件table实现自定义筛选功能的示例代码
10-17
在本文中，我们将深入探讨如何使用element-ui组件库中的table组件实现一个自定义的筛选功能。element-ui是一个流行的Vue组件库，它提供了各种各样的UI组件，以帮助开发者快速构建高质量的Web界面。其中，table组件是...
el-table设置部分多选框禁选
lidianbai的博客
05-28 1823
el-table设置部分禁选
elementui 的el-table设置不可勾选
DejaVus的博客
10-19 2542
el-table 勾选框禁用
Element-UI：如何实现表格组件el-table多选场景下根据数据对某一行进行禁止被选中？
qq_44776454的博客
01-06 1618
Element-UI：如何实现表格组件el-table多选场景下根据数据对某一行进行禁止被选中？
Element UI中el-table组件type=selection时CheckBox禁止选择
lee_uncle的博客
04-11 1224
Element UI中el-table组件type=selection时CheckBox禁止选择。
Element - UI : el - table 多选框禁用
qq_45061461的博客
06-08 5591
点击确定,提交数据到父页面,然后保留此页面的勾选数据,下次进入的时候上次已经选中过的数据变成禁用状态,外边删除的时候,在此进入已经被删除的数据,在弹窗中变成可选取状态.2.:selectable="checkSelectSet" //selectable属性:是否不禁用状态 --- checkSelectSet自定义的方法名。开发表单弹窗的时候 需要在父组件中显示 弹窗选中的数据,然后第二次点击弹窗的时候需要禁用已经选中的数据。1.必须属性 type="selection" 这样才能变成多选。
elementui table禁用全选,一次限制勾选一项。
weixin_43045869的博客
04-07 758
2、使用动态css 隐藏顶部全选框。添加属性：:header-cell-class-name=“hideAllCheckbox”1、设置属性：@selection-change=“handleSelectionChange”
el-table多选框禁用
weixin_44845483的博客
01-06 8684
el-table多选框有时需要禁用，selectable为true此行数据不禁用，为false则本行禁用
el-table可以选中 但是在某些条件下禁止选中
只会写bug
10-22 1626
在Element UI中，可以通过覆盖默认的行为来实现这样的功能，即在某些条件下禁止选中表格中的行。具体来说，可以通过监听。字段，并根据此字段决定是否允许选中，就能实现在某些条件下禁止选中的功能。事件或者覆盖选择框的行为来实现这一点。以下是一个示例，展示了如何在一个。这样，通过在数据中增加一个。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值