编码技巧(二) element-ui table中根据状态控制是否可以勾选

最新推荐文章于 2024-01-12 14:14:05 发布
最新推荐文章于 2024-01-12 14:14:05 发布
阅读量774 收藏 6
点赞数 8
分类专栏： Java开发经验 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mr_z2017512/article/details/135483950
版权
Java开发经验 同时被 2 个专栏收录
28 篇文章 0 订阅 ¥99.90 ¥299.90
订阅专栏
Java工程师
21 篇文章 1 订阅 ¥99.90 ¥299.90
订阅专栏
本文介绍如何在使用Element UI的表格组件时，根据数据状态控制特定行的勾选操作。以项目实例为例，展示了仅允许id为12的数据项被勾选的实现方法，利用`:selectable`属性进行状态控制。
摘要由CSDN通过智能技术生成

项目中使用element-ui时，表格中的数据有不同的状态，需要对某个状态的数据进行 勾选操作

如图所示：

在这里插入图片描述
只有id为12的符合条件可以进行勾选

<el-table-column type="selection" header-align="center" :selectable="selectable" align=
了解本专栏 订阅专栏 解锁全文
选择与努力
关注
专栏目录
订阅专栏
element-ui table组件翻页后记录之前页面勾选数据
u013093588的博客
08-31 313
【代码】elementui table翻页回填已选中数据，并记录所有已选数据。
element-ui中table大量数据渲染卡顿
热门推荐
xssxxssx的博客
11-12 1万+
element-ui中的el-table在使用大量数据的时候卡顿、卡顿、卡顿（重要的事将三遍）， 特别是在table中还使用el-checkbox来进行全选的时候， 点击按钮直接卡顿3s界面才渲染，有没有很痛苦（反正我是很痛苦）， 其实，可以使用pl-table来处理表格的（不是我写的）； eg：就像这样 <pl-table row-key="id" ...
ElementUI根据某些状态判断复选框的状态实现
BrightLD的博客
04-29 8521
table表格中根据某些状态来判断复选框是否可以勾选？ 我们为多选框表格增加一个selectable属性，改属性仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 //核心代码如下 <el-table-column type="selection" ...
el-table控制表格是否可选
enhenglhm的博客
11-24 465
el-table控制表格是否可选
ElementUI 的Table组件判断当前是勾选状态还是取消勾选状态
wangchaohpu的博客
05-06 9167
判断当前表格勾选的是选中的还是取消选中的 <el-table @select = "onTableSelect"></el-table> onTableSelect(rows, row) { let selected = rows.length && rows.indexOf(row) !== -1 } 如果selected为true...
[element-ui]在el-table中使用el-checkbox实现勾选功能
xxuxioxx的博客
10-07 1万+
利用el-checkbox模拟表格自带的勾选事件
elementUI el-table 使用 表格多选时，根据数据状态禁用部分行的选择框
m0_68964998的博客
09-19 3879
1、在type = selection 列加上selectable方法，利用函数返回值来控制勾选框的可选与禁用。
60.实现elementUI表格点击某一行选中勾选框
银河与猫的博客
08-20 5444
前言： 项目中需要做到除了勾选表格第一列勾选框去选中数据外，还要通过点击某一行任何地方，都可以勾选到这条数据，并且要做到选中的数据不能重复，记录一下： （全选和选中勾选框的方法就不写了 这里只写通过点击行选中勾选框） 1.首先给<el-table>添加 ref='multipleTable' 和 @row-click="handleClickTableRow" <el-table ...... ref="multipleTable" @row-cli
详解element-ui表格中勾选checkbox，高亮当前行
10-16
本文主要介绍了在使用Element UI库进行Web开发时，如何实现一个表格组件中勾选复选框并高亮当前行的功能。通过详细分析，读者可以了解到在后台管理系统中常见的一种表格操作需求，并且提供了解决这一问题的思路和...
el-table select事件判断当前项是否勾选
qq_45600228的博客
08-10 1210
el-table select事件判断当前项是否勾选
别再手动点选了，vue+element实现表格中点击某一行全选框选中此行所有选框
希望看完文章的你能够带着答案离开
06-14 3289
别再手动点选了，vue+element实现表格中点击某一行全选框选中此行所有选框
VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据
HanXiaoXi_yeal的博客
01-06 2802
需求： 1. 发货数量默认为0，用户可自行输入； 2. 点击复选框将未发货数动态赋值给发货数，取消复选发货数为0； 3. 点击全选框将每行的未发货数赋值给对应发货数，取消全选发货数为0。 实现步骤： 画重点： 1.模板定义 <el-table v-show="order" ref="multipleTable" :v-loading="loading" border :data="tableDataOrder" height="69vh" style="width: 100
element-ui el-table表格勾选框条件禁用，及全勾选按钮禁用， 记录
最新发布
xh1506101064的博客
01-12 1万+
表格的部分内容是可以被勾选的，部分内容是不可以被勾选的使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的。
【element-ui】使用el-checkbox完成el-table表格数据的全选操作
weixin_48847755的博客
03-08 7822
使用el-checkbox完成el-table表格数据的全选、单选、反选操作
el-table嵌套,实现父子选择框勾选联动(toggleRowSelection),并实现全选,单选,数据回显
weixin_44780971的博客
04-10 1万+
效果图如下:声明:代码参考与两位博主:1.2.在本文章中,我会讲一点代码的逻辑,仅供参考,因为代码是活的,人是死的(如果人是活的,代码怎么可能是死的呢)话不多说我们开始!
el-table多选：设置初始勾选状态、跨页保持勾选状态，同时能与一个已选择列表进行动态联动
cmelody的博客
12-20 1万+
el-table多选：设置初始勾选状态、跨页保持勾选状态，同时能与一个已选择列表进行动态联动
element的table多选操作复选框的是否可选
m0_52611940的博客
12-21 501
element的table多选操作复选框的是否可选
element-ui table 复选框判断选中还是未选中及默认值的填充
XueZePeng18729875380的博客
05-09 6415
1. 注意：如果当前列表数据存在分页，那么选中的数据id集合是所有的选中数据，不是当前页选中的数据id集合。2. 将当前的列表数据和选中的id集合进行比对，id存在就使用。中的table组件提供了。方法进行复选框的数据回填。
element-ui table中使用type=‘selection‘ 实现禁用，勾选，默认选中不可修改 三种状态显示问题
蓝胖子的博客
08-25 1万+
element-ui table中使用type='selection' 实现禁用，勾选，默认选中不可修改 三种状态显示问题
Element-UI el-table 勾选中某一项 取消选中某一项
05-20
在 Element-UI 的 el-table 中，如果要实现勾选中某一项和取消选中某一项的功能，需要使用 el-table 的 selection 属性与 @selection-change 事件。 首先，在 el-table 标签中设置 selection 属性为一个数组，用来存储被勾选的行数据，如下所示： ```html <el-table :data="tableData" :selection="selectedList" @selection-change="handleSelectionChange"> ``` 其中，tableData 是 el-table 的数据源，selectedList 是存储被勾选的行数据的数组。 接下来，在 methods 中定义 handleSelectionChange 方法，用来处理勾选和取消勾选的逻辑，如下所示： ```javascript methods: { handleSelectionChange(selection) { this.selectedList = selection; } } ``` 在该方法中，我们将 el-table 的 selection 属性设置为传入的 selection 数组，这样就可以实现勾选和取消勾选的功能了。 如果需要在 el-table 中显示勾选框，可以使用 el-table-column 的 type 属性，如下所示： ```html <el-table-column type="selection" width="55"></el-table-column> ``` 这样就可以在 el-table 的每一行前面显示一个勾选框了。同时，也可以在 el-table-column 中设置 selectable 属性，来控制某一行是否可以被勾选，如下所示： ```html <el-table-column type="selection" width="55" :selectable="row => row.status === 'active'"></el-table-column> ``` 在该示例中，只有 row.status 属性值为 'active' 的行才能被勾选。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

选择与努力

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

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

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

打赏作者

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

抵扣说明：

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

余额充值