element-ui表格点击行选中，再次点击取消，把选中的项放到一个数组中

最新推荐文章于 2023-03-05 16:54:31 发布
最新推荐文章于 2023-03-05 16:54:31 发布
阅读量2.7k 收藏 3
点赞数 2
分类专栏： element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18088115/article/details/104946156
版权

1、通过点击行 触发el-table 的row-click事件
2、然后改变通过toggleRowSelection（）改变选择项
3、由于选择项被改变自动触发selection-change事件
4、通过selection-change事件把所要的项添加进数组

具体如下：在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

qq_18088115
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui表格数据转换的示例代码
10-18
主要介绍了element-ui表格数据转换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
el-table，点击复选框，总是选中最后一个，且选中数组叠加了很多数据
最新发布
WDY66886688的博客
03-06 398
el-table，点击复选框，总是选中最后一个，且选中数组叠加了很多数据。解决方法：tableData的数据要有唯一编码id。
elementUI中的table表格，带选择框，点击选中选择框，获取当前行id，存储数组若没有当前id，存进数组，再次点击，取消选中，从存储数组中删除id
as965874的博客
09-10 2209
需求场景：一个表格中有几十条数据，每一行代表一条，表格第一列是选择框，当点击某一行的选择框，选中此条数据，将此条数据的id存进存储数组，若点击取消选中状态，则将该条数据对应id从存储数组中删除。 template代码 <el-table :data="roleData" style="margin:15px 0" border stripe height="260" @select="(selection,row)=
vue前端，通过Checkbox选中el-table里的数据，插入到数据库中
guapilixianghe的博客
05-27 2307
这几天遇到了一个难题，就是如题目所示，需要把选中的el-table表格里的数据提交到数据库里，经过了几天的折磨，总算是完成了。现在把从前端到一直提交到数据库里的全过程已经使用的方法写出来，帮助有疑问的小伙伴少走弯路。 1.前端vue代码 UpOne() { let that = this; var a = this.tableDataSelections //这个就是我们选中的el-table表格里的数据 conso.
Element-UI 表格分页时，选中状态可保存
Siyuan_95的博客
07-17 2655
一、大部分文章的主要误区 代码的部分，借鉴了一下这篇文章，有稍许自己的修改。 https://blog.csdn.net/Ms_alinda/article/details/102861781 通过属性解决的方法 <el-table :row-key="rowKey"> <el-table-column type="selection" :reserve-selection="true"></el-table-column> </el-table&g
【ElementUI】获取表格选中行的id数组
四通一达小星星的博客
07-10 7693
如何获取到 ElementUI 中 表格(table) 组件前 多选框被选中后的id数组呢？ 使用 table 组件的@selection-change事件监听当多选框被选中时的动作，获取到当前被选中的对象，将对象中的id取出之后放到新的数组中即可。 <el-table ref="multipleTable" :data="merchantManage" tooltip-effect="dark" style="width: 100.
element-plus table组件单击行切换选中状态、点击高亮行、设置shift或ctrl连续多选和连续取消多选（支持多段选择）
个人博客
11-21 4231
无
详解element-ui表格中勾选checkbox，高亮当前行
10-16
主要介绍了详解element-ui表格中勾选checkbox，高亮当前行，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui表格合并span-method的实现方法
10-16
在Element-UI框架中，表格（`el-table`）组件提供了强大的功能，其中包括表格单元格的合并。在处理复杂表格布局时，有时我们需要合并某些行或列以展示更清晰的数据结构。`span-method`属性正是为此目的而设计的，它...
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
今天在写个后台管理系统，使用了element-ui的组件库。在做角色权限，通过tree控件展示权限列表的时候，用:default-checked-keys绑定数据，这个属性不能实现双向绑定，只能用于初始化选择状态。如果想双向绑定只能...
ElementUi表格行的点击选中和取消
qq_48965193的博客
09-16 3219
ElementUi表格行的点击选中和取消
el-table中的toggleRowSelection无效
qq_40011214的博客
08-15 4029
el-table中的toggleRowSelection无效问题
elementui的表格单选选中之后可以取消的方法
weixin_51338875的博客
01-31 4014
解决elementui的表格单选选中之后可以取消的方法
【elementUI】【radio】【vue3】 点击再点击 取消和选中
qq_53478650的博客
03-05 6359
通过传过来的e值与设置的radio值比较 （这里设定是如果相等则让radio为空（不选中），否则就让radio为这个传过来的值（ 选中），之后就会循环往复：为这个传过来的值e，为空.....）总结：通过以上方法实现了radiobutton的单个使用，虽然javajframe里的直接用，但这个官网好像没给说明（应该是觉得太简单了）然后编写这个事件的方法 （首先你要在data里return radio 或者其它方式）1、radio单用 想要重复点击选中取消选中两个状态切换的设置。
html表格 取消选中,element ui ----table表格（带多选框）+分页实现分页选中和分页取消选中...
weixin_29219539的博客
06-25 408
大概的需求是，把A表格里面选中的数据，赋值到B表格中，当B表格移除某条数据时，A表格中对应的那条数据也应该取消选中。image.pngimage.png首先遇到的问题是，切换到第二页以后导致第一页选中的数据取消了，解决方法，官方文档有提到，上代码image.pngimage.pngrow.supplierguid 是唯一标识，什么id，key等。再然后遇到的问题就是A表格移除某一项数据以后，B还...
标签点击选中，再点击取消
南野子
11-01 265
标签点击选中，再点击取消
点击当前元素将信息存在数组，再次点击从数组移除
rainux
11-04 953
Code Is Never Die ！ 真实场景： 昨天在做一个选中与取消选中元素的功能，需要用到频繁push(加入)和remove(移除)元素的操作。 实现思路： 首先需要先判断数组中是否包含即将操作的元素； 若不存在，则将当前元素push至数组中；若存在则将当前所选元素在数组中找到并splice移除； 引入新方法： 根据数组元素的 “值” 来删除数组中当前 “值” 元素。 对数组增加内置属性方法： Array.prototype.contains = function(obj) { var i
前端删除elementui表格选中行数据
szh1127249432的博客
08-31 2863
前端删除elementui表格选中行数据
element-ui怎么清除表格选中项
05-16
可以通过以下两种方式清除 Element UI 表格的选中项： 1. 使用 `clearSelection` 方法 可以在表格的实例对象上调用 `clearSelection` 方法来清除选中项，例如： ``` this.$refs.table.clearSelection(); ``` 其中 `table` 是表格的 `ref` 属性值。这个方法会清除表格中所有选中的行。 2. 使用 `row-key` 属性 可以在表格的 `row-key` 属性上绑定一个唯一的值，然后在需要清除选中项的时候，将 `row-key` 的值修改为一个新的、不与任何行的 `row-key` 值冲突的值。这样，之前选中的行就会被取消选中。例如： ``` <el-table :data="tableData" :row-key="row => row.id" ref="table" > ... </el-table> ``` 然后在需要清除选中项的时候，可以修改 `row-key` 的值： ``` this.rowKey = Date.now(); ``` 这个方法会清除表格中所有选中的行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值