当前位置: 首页 > 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.lryc.cn/news/227942.html

相关文章:

  • JL-03小型气象站气象环境在线监测设备自动上传并保存数据
  • Ansible的变量(vars,register,set_fact)
  • 麒麟KYLINIOS软件仓库搭建03-软件仓库添加新版本的软件包
  • 监控系统是怎么组的(sentry)
  • Java --- 直接内存
  • 数据结构与算法之排序: Leetcode 21. 合并两个有序链表 (Typescript版)
  • AIGC:使用bert_vits2实现栩栩如生的个性化语音克隆
  • 2023年CKA考试真题及注意事项
  • 云计算运维面试
  • Qt实现TCP调试助手 - 简述如何在Qt中实现TCP多并发
  • 【Python OpenCV】OpenCV介绍
  • 11-09 周四 CNN 卷积神经网络基础知识
  • Vue.js中的路由(router)和Vue Router的作用?
  • 从开源项目聊鱼眼相机的“360全景拼接”
  • 网络安全——
  • 用excel 整理工作流程,以周为时间节点,自动统计进度
  • Wireshark学习 与 TCP/IP协议分析
  • Sequence(矩阵连乘+数论)
  • 集合工具类的常用方法--小总和
  • 一文了解游戏行业(数据分析)
  • Flutter之Json序列化
  • Java基础——局部变量和常量
  • 番外 1 : Java 环境下的 selenium 搭建
  • 游戏缺失d3dx9_39.dll的5个修复方法,深度解析d3dx9_39.dll文件的作用
  • RHCSA --- Linux用户/组权限
  • 怎么做到高性能网络IO?
  • 设计模式-创建型
  • Word通过Adobe打印PDF时总是报错,打开记事本
  • 第2关:还原键盘输入(list)
  • 数据结构 | 栈的实现