element ui el-table分页多选功能失效

最新推荐文章于 2024-05-07 14:37:12 发布
最新推荐文章于 2024-05-07 14:37:12 发布
阅读量822 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52630329/article/details/136890283
版权

编写 项目是遇到一个坑：selection-change：当选择项发生变化时会触发该事件（当分页切换时，选中的数据都会自动清空）

一、在el-table中
// 添加 :row-key= "id"

 <el-table row-key="id" 
           :data="tableData"  
           @selection-change="handleSelectionChange">
 </el-table>


二、在el-table-column中
/**设置 type=“selection” 并且设置 :reserve-selection=“true” **/

 <el-table-column 
    type="selection" 
    align="center"              
    :reserve-selection="true">
  </el-table-column>

添加上述刷新重试即可

踢足球的，程序猿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-table表格分页多选
weixin_44138241的博客
02-15 2164
element table 分页多选问题
element ui el-table 动态改变 单元格 的颜色.txt
11-11
element ui el-table 动态改变 单元格 的颜色, 将el-table 包在自定义组件（page_table）里面，可以重复使用。
element ui分页多选,翻页记忆的实例
10-16
今天小编就为大家分享一篇element ui分页多选,翻页记忆的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui e-table表格中使用多选,当翻页时已选中的数据丢失
qq_58671311的博客
11-05 4031
vue项目中使用element的table表格进行多选操作时，当勾选了第一页数据后点击第二页后第一页的数据被清空了。
element-ui Pagination 分页组件有时候失效问题
最新发布
qq_52014705的博客
05-07 249
element-ui Pagination 分页组件时好时坏
Element UI 多选表格【翻页多选】全能版（含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案）
朝阳39的博客
07-26 5022
selection-change 的参数为当前页选中的所有行，在每次重新获取数据渲染表格时（如翻页时），参数为一个空数组，会导致历史选中的数据被清空！即便使用 来保留历史选中记录也无法达到预期效果。toggleRowSelection失效通常为以下两种情况：（1）表格数据发生变化，表格还没渲染完便执行了toggleRowSelection解决方案 ： 在 $nextTick 中执行 toggleRowSelection （2）toggleRowSelection的第一个参数不是表格源数据即便数据的值完全一
element ui的table选择遇到的坑（如翻页选中态消失）
LingSnow1019的博客
08-10 4101
产品需求实现两步的弹窗选择加table选中并展示到新的表格中，基本样式如下 1.在列表选择页选择数据展示到下面的新table中，但是翻页回来列表的选中态就取消了，根据ui文档的方法可以加上row-key <el-table //标签添加 :row-key="getRowKey" ></el-table> //js getRowKey(row) { //缓存列表状态 return r
解决 el-table 多选框，前端分页，选中失效问题；多选改为单选
lareinax5的博客
06-19 1828
【代码】解决 el-table 多选框，前端分页，选中失效问题。
element-ui中的el-table实现分页切换连续多选功能(切换分页，保存上一页勾选的）
MISS_zhang_0110的博客
01-04 832
第一页勾选两个，切换第二页，勾选三个，目的：总共勾选五个。
前端element 分页插件的失效问题
weixin_459417989的博客
03-10 2868
拿到插件后直接用，高兴的很 <el-pagination ref=pagination @size-change=“handleSizeChange” @current-change=“handleCurrentChange” :current-page.sync=“currentPage1” :page-size=“100” layout=“total, prev, pager, next...
elment分页插件不生效
ss810540895的博客
07-19 783
不管传的是几，后端都是1，至于其他原因导致分页插件不生效的，可参考网上其他方案。，进而导致点击分页后面几页的时候一直显示第一页，因为前端的。网上看了很多原因，但跟我的不一样，我的原因是前端data里面存的是。，而后端实体类存的是。...
el-table多选checkbox实现可多页多选，翻页后勾选情况不清空
凉酱的博客
01-13 2450
需求：表格数据分多页，里面的多选框生效时是只在当前页生效，用户可能需要选择多页数据，这样就需要在数据翻页后之前以选中的要保留并且在新的一页上选中的要加上。 实现： 在表格<el-table>里加入:row-key="(row)=>{ return row.id}" <el-table :row-key="(row)=>{ return row.id}" ref="multipleTable" :data="tableData" @selectio
Element-ui table 分页后，el-tooltip失效 Vue
weixin_48215380的博客
04-11 777
el-table列表分页之后el-tooltip效果失效。
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
详解使用element-ui table组件的筛选功能的一个小坑
10-17
在Element UI框架中，`el-table`组件是一个强大的表格组件，提供了丰富的功能，包括筛选功能。在实际开发中，我们可能会遇到一些小问题，比如在尝试实现自定义模板与筛选功能相结合时，可能会遇到筛选不生效的问题。...
el-data-table:element基于element-ui，轻松实现结界
05-13
创建el-data-table来解决业务问题，因此在其中设置了CRUD逻辑。 例如，要开发user api，请假设其相对路径如下： / api / v1 / users 宁静的CRUD API应该是： 取回 GET / api / v1 / users ? page = 1 & size = 10...
【Vue2 + Element UI】 解决了关于el-table表格多选后，切换分页出现的多选状态回显不正确问题。请看详细解析！--前端
2302_78387246的博客
04-18 717
【Vue2 + Element UI】 解决了关于el-table表格多选后，切换分页出现的多选状态回显不正确问题。请看详细解析！---- 前端
el-table 多选表格存在分页，编辑再次操作勾选会丢失原来选中的数据
前端打工人的博客
02-27 1303
el-table表格多选时，只需要添加row-key及，如果存在分页时需要加上，这里就不写具体的实现方法了，可以查看我之前的文章，这篇文章主要说一下存在的问题。
vue-cli-element-ui-table-表格分页功能切换数据后@current-change失效的解决方案
郝峰vip的博客
12-11 2459
前沿 最近在开发过程中，遇到了切换了表格中的数据后，分页的功能失效，current-change方法失效，折腾了好久，最后终于解决了，记录下来，方便后续学习，也发现形成一个思维的问题，不能老是闷头敲代码，要多交流。好了，不废话了，切入正题。 解 决方案就是销毁分页组件在重建这样就会完全重新渲染了分页组件。 这里采用的是v-if的重建解决方案 <div class='pagi...
element ui el-table中多选
08-30
在 Element UI 的 el-table 中实现多选功能，你可以使用 table 组件的 selection 属性来实现。下面是一个示例代码： ```vue <template> <el-table :data="tableData" :selection="selection" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="name" label="Name"> </el-table-column> <el-table-column prop="age" label="Age"> </el-table-column> <el-table-column prop="address" label="Address"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 20, address: '1234 Street' }, { name: 'Jane', age: 25, address: '5678 Street' }, { name: 'Tom', age: 30, address: '9876 Street' }, { name: 'Alice', age: 35, address: '5432 Street' } ], selection: [] }; }, methods: { handleSelectionChange(selection) { this.selection = selection; } } }; </script> ``` 在上述代码中，我们通过添加一个类型为 "selection" 的 el-table-column 来显示多选框列。然后，我们使用 selection 属性绑定一个空数组，并通过 @selection-change 监听选择变化事件，在方法中更新 selection 数组的值。 这样，你就可以在 el-table 中实现多选功能了。当用户选择或取消选择行时，selection 数组会随之更新。你可以根据需要进一步处理选择的数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值