当前位置: 首页 > 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. 开发的时候,查看文档细心一点阅读,可以避免开发中遇到的大多数问题。

相关文章:

  • 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加密分析
  • 著名文博专家吴远明因交通事故离世,享年75岁
  • 联合国:欢迎俄乌伊斯坦布尔会谈,希望实现全面停火
  • 习近平就乌拉圭前总统穆希卡逝世向乌拉圭总统奥尔西致唁电
  • 对谈|“大礼议”:嘉靖皇帝的礼法困境与权力博弈
  • 韶关一企业将消防安装工程肢解发包,广东住建厅:罚款逾五万
  • 联合国报告:全球经济前景恶化,面临高度不确定性