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

iview Table实现跨页勾选记忆功能以及利用ES6的Map数据结构实现根据id进行对象数组的去重

因为iview Table组件的勾选是选中当前页的所有数据,当我们切到别的页面时,会发送请求给后端,这个时候就会刷新我们之前页码已经选中的数据。现在有个需求就是,在我们选择不同页码的数据勾选中之后,实现跨页勾选记忆功能,就是说已经打钩了的数据,不管切到哪一页它都是打钩状态。效果如下,第一页勾了10条,第二页勾了2条,第三页勾了1条:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实现思路就是Table组件的columns里配置 type: "selection"开启勾选功能,然后利用 **@on-selection-change=“onSelectChange” @on-select-cancel=“onSelectCancel”**这两个方法,
这里我封装了一个去重方法deWeightThree,它可以根据对象数组里id进行去重。onSelectChange方法里如果val有值表示勾选中了某一条,否则就是取消全选当前页的数据。我们在data里定义了一个数组selectArr,用于存储我们当前所有页面已经选中打钩的数据。getTableData_new获取当前页table数据,需注意的是在我们调获取当前页table数据的接口成功后&

http://www.lryc.cn/news/258182.html

相关文章:

  • 【Spring 源码】 贯穿 Bean 生命周期的核心类之 AbstractAutowireCapableBeanFactory
  • 漏洞复现-某友UFIDA NC系统某接口未授权访问漏洞(附漏洞检测脚本)
  • 树莓派5安装opencv
  • 【测试开发】Python+Django实现接口测试工具
  • 从 MQTT、InfluxDB 将数据无缝接入 TDengine,接入功能与 Logstash 类似
  • 友元c++
  • java: 错误: 不支持发行版本 6
  • qml刷新C++中的QImage图像
  • IJCAI 2024 International Joint Conference on Artificial Intelligence
  • 使用Python Flask搭建Web问答应用程序并发布到公网远程访问
  • android 13.0 app应用安装白名单
  • SSL证书HTTPS保护服务
  • 快速认识什么是:Docker
  • c语言青蛙跳台阶
  • IntelliJ IDEA 2023.3 最新版如何试用?IntelliJ IDEA 2023.3 最新版试用方法
  • Java参数校验详解:使用@Valid注解和自定义注解进行参数验证
  • 多维时序 | MATLAB实现BWO-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测
  • C++ 中的引用
  • MQ-Det: Multi-modal Queried Object Detection in the Wild
  • HarmonyOS应用开发初体验
  • 《C++新经典设计模式》之第4章 策略模式
  • 【方法】PowerPoint“只读方式”如何取消?
  • MySQL数据库概念与实践
  • 【ArcGIS Pro微课1000例】0052:基于SQL Server创建企业级地理数据库案例
  • 深度学习——第3章 Python程序设计语言(3.7 matplotlib库)
  • 【数据分析实战】酒店行业华住集团门店分布与评分多维度分析
  • 近期Chrome浏览器 不知哪个版本升级后原先http强制跳转到https,导致服务端302强制跳转到http也没反应
  • 【scikit-learn基础】--『数据加载』之样本生成器
  • 基于 ESP32-S3 的 Walter 开发板
  • Gitlab+GitlabRunner搭建CICD自动化流水线将应用部署上Kubernetes