当前位置: 首页 > news >正文

【element ui】翻页记忆功能、多选时执行删除操作,刷新表格问题

目录

  • 一、element ui 让表格翻页选中仍然有记忆功能
  • 二、element+vue 表格多选时执行删除操作,刷新表格问题
  • 🚀写在最后

一、element ui 让表格翻页选中仍然有记忆功能

问题描述:
在这里插入图片描述

下面描述实现的步骤和代码

第一步:给表格添加 row-key

关键点::row-key="(val) => val.id"

第二步:给多选框加默认选中功能

关键点::reserve-selection="true"

切换分页持久化选中表格,其实关键代码就这2行

val是获取的数据,该数据中有个唯一值id可以使其一一对应控制要展开的行
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

参考文章:如何让ElementUi的多选框表格,翻页选中有记忆功能保持默认选中教程(elementui表格复选框)
参考文章:上面这种方法在只能记录一次表格的选中情况,如果涉及到多个地方使用了上述相同的表格组件,而每个表格的选中情况不相同,则上述方法不再适合:
解决方法:在获取表格数据的时候,使用组件提供的 toggleRowSelection 方法,切换某一行的选中状态,进行多选框的回显,此方法也可实现切换分页时的回显,需要注意的是 使用 toggleRowSelection 方法 必须使用绑定table的原有数据,不可使用传入的参数,否则方法会无效

二、element+vue 表格多选时执行删除操作,刷新表格问题

问题描述:当table执行多选时,走后台执行删除操作之后,再次选择之后就会加上之前删除的数据,并没有清空
在这里插入图片描述

解决办法:
第一步:用ref绑定表格:
第二步:在执行ajax之后:清除复选框,并清除对应的数组。
在这里插入图片描述

在这里插入图片描述

参考文章:element+vue 表格多选时执行删除操作,刷新表格问题

🚀写在最后

希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~
❤️原创不易,期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识,关注我不迷路~

http://www.dtcms.com/a/108396.html

相关文章:

  • VS+Qt配置QtXlsx库实现execl文件导入导出(全教程)
  • 自动调整PPT文本框内容:防止溢出并智能截断文本
  • Shiro学习(三):shiro整合springboot
  • 城电科技 | 探秘零碳校园:创新应用,引领绿色未来
  • PHP在Debian环境上的并发处理能力如何
  • 深度学习处理文本(6)
  • STM32实现一个简单电灯
  • 2023年12月电子学会青少年软件编程四级考级真题—新“跳7”游戏
  • OpenCV
  • 系统与网络安全------Windows系统安全(5)
  • Maya软件中的约束基础:提高角色动画制作效率的关键技术
  • 【解决】Edge浏览器硬件加速问题:无法滚动与卡顿的应对方法
  • Lumerical ------ Edge coupler design
  • Test——BUG篇
  • 掌握 Git 的艺术:Rebase 和 Merge 的使用技巧
  • MySQL 中 LOCK TABLES(手动锁表) 语句的详细说明,包括语法、使用场景、示例代码及注意事项
  • c加加学习之day02
  • ubuntu制做vsftpd的docker镜像
  • git总是链接不成功
  • Excel处理控件Spire.XLS系列教程:C# 打印 Excel 文档
  • 【算法】双指针
  • GIT ---- 解决【fatal: Authentication failed for】
  • 【案例89】达梦数据库优化器参数导致的SQL执行错误
  • 在Ubuntu20.04开发Dify插件教程,部署Dify插件脚手架
  • 深度学习 Deep Learning 第15章 表示学习
  • 针对 MySQL 数据库的详细说明,分类列出临时资源(临时表、游标、未提交事务、会话变量、预编译语句)的创建、清理方式及未清理后果,并以表格总结
  • [CH32] RISC-V汇编指令解释
  • linux下springboot项目守护进程编写
  • arm64平台下linux访问寄存器
  • Python----机器学习(线性回归:前向传播和损失函数)