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

【解决问题】---- 解决 avue-crud 表格勾选数据翻页后界面保持选中

1. 错误预览

  1. 第一页选择【7、8、9、10】
    在这里插入图片描述

  2. 直接点击第三页未进行选择
    在这里插入图片描述

  3. 直接点击第四页未进行选择
    在这里插入图片描述

2. 问题总结

  1. 通过测试可以看到,页面的选择项会影响到其他页面的选择;
  2. 点击保存,返回的数据却是真真选择的数据;
  3. 数据在选择渲染的时候出现了混乱。

3. 分析问题原因

  1. 其实这就是 vue 中列表渲染的 key 作为唯一标识,在设置的时候没有给表格添加上。

4. 解决办法

4.1 解决方案一:设置一个表格 row 的唯一标识
  1. selection 配置表格是否可选择;
  2. reserveSelection 在数据更新之后保留之前选中的数据;
  3. rowKey 行数据的 Key,用来优化 Table 的渲染(注意:rowKey 必须是表格列表中的唯一标识,如果存在重复,依然会出现渲染错误)。
  selection: true,
  reserveSelection: true,
  rowKey: 'spuId',
4.2 解决方案二:列表后端返回时就返回一个唯一标识的id属性【或者前端构建一个】

在这里插入图片描述

5. 官方文档

官方文档: avue-crud 的 option 配置

5.1 reserveSelection 的默认值和解释

在这里插入图片描述

5.2 rowKey 的默认值和解释

在这里插入图片描述

6. 总结

  1. 由于配置属性太多,开发的时候都是需要什么,再去找什么,所以此篇博客作为一个记录,方便后期出现相同或类似问题进行查找;
  2. 分析出现问题的原因,去查找文档对应的设置,完善配置;
  3. 开发的时候,查看文档细心一点阅读,可以避免开发中遇到的大多数问题。
http://www.dtcms.com/a/3997.html

相关文章:

  • Springboot通过ObjectMapper(节点树)解析JSON
  • golang 2018,go 1.19安装Gin
  • 爬虫项目(13):使用lxml抓取相亲信息
  • 数据结构线性表——栈
  • PlayCanvas通过IFrame嵌入页面如何与canvasplay脚本通讯
  • 安防监控EasyCVR视频汇聚平台无法接入Ehome5.0是什么原因?该如何解决?
  • Linux--gcc/g++
  • 【机试题】编写一个Java函数,实现批量获取数据的功能
  • 【nlp】1.4 文本特征处理(n-gram特征、文本长度规范:补齐与截断)
  • 卷积操作中的padding和strides
  • Sprint Boot 学习路线 6
  • Socket网络编程
  • 通讯协议学习之路(实践部分):SPI开发实践
  • hadoop
  • C/C++数据结构之链表题目答案与解析
  • Apipost IDEA插件如何使用
  • Python爬虫——入门爬取网页数据
  • rhcsa-权限
  • AR打卡小程序:构建智能办公的新可能
  • 某XX自考小程序的AES加密分析
  • 【LeetCode刷题笔记】栈和队列
  • STM32——NVIC中断优先级管理分析
  • Spring Boot (三)
  • python实现全向轮EKF_SLAM
  • ip数据包
  • 媒体聚焦丨四维图新旗下杰发科技王璐:设计决定芯片质量
  • Nginx学习(在 Docker 中使用 Nginx)
  • JavaEE初阶学习:JVM(八股文)
  • CPS:实现销售和广告的完美结合
  • 安全框架SpringSecurity-1(认证入门数据库授权)