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

news2024/11/23 15:54:28

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.coloradmin.cn/o/1187370.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Leetcode—515.在每个树行中找最大值【中等】

2023每日刷题(二十三) Leetcode—515.在每个树行中找最大值 DFS实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ /*** Note: The returned arra…

rhcsa-用户和组管理

一.用户和组的分类 1、在Linux中用户可以分为三类 第一种是超级用户一一用户名为root,它具有一切权限,只有进行系统维护(例如:建立用户等)或其他必要情形下才用超级用户登录,以避免系统出现安全问题 第二种是系统用户(伪用户)一一是…

2—C++程序设计:C++简单程序设计

2—C程序设计:C简单程序设计 1,无符号数的32bits系统的运算二级目录三级目录 1,无符号数的32bits系统的运算 32位系统, 1,有符号数的范围是:0~4, 294, 967, 295; 2,无符号数的范围是…

Java中对象转型

理解: 有一个对象 new ADHero(), 同时也有一个引用ad 对象是有类型的, 是ADHero 引用也是有类型的,是ADHero 一般来说引用类型和对象类型是一样的,当引用类型和对象类型不一致就要考虑类型转换 简单判断:把右边的当…

osg 八叉树可视化

目录 什么是八叉树 八叉树算法过程 八叉树的计算原理 八叉树c实现 使用osg可视化八叉树 什么是八叉树 在描述三维场景的过程中常常用到一种名为八叉树的数据结构。描述三维空间的八叉树和描述二维空间的四叉树有相似之处,二维空间中正方形可以被分为四个相同形…

3.29每日一题(微分方程的几何应用题:重点考察)

1、画图,把题目中的条件标出来 2、通过题目中的条件设出正确的微分方程(解题的关键) 注:用点斜式设方程的时候,注意Y - y y(X - x)中(x,y)为曲边上的动点&a…

srs webrtc推拉流环境搭建

官方代码https://github.com/ossrs/srs 拉取代码: git clone https://github.com/ossrs/srs.gitcd ./configure make ./objs/srs -c conf/rtc.confconf/rtc.conf中,当推拉流浏览器在本地时,如果srs也在本地,那么可以使用官网默认…

C++ STL - map 与 multimap用法和区别

目录 一、概述 二、用法 2.1、插入 2.2、拷贝与赋值 2.3、查找 2.4、删除 2.5、完整代码 三、其他成员类型 一、概述 map 与 multimap是存储key-value(键-值 对)类型的容器。不同之处在于:map只允许key与 value一一对应;…

在医疗影像领域,生成式模型可以做些什么?用什么平台快速实现?使用MONAI框架进行生成式模型开发

生成模型具有巨大的潜力,不仅有助于通过合成数据集安全地共享医疗数据,还可以执行一系列逆向应用,如异常检测、图像到图像翻译、去噪和MRI重建。然而,由于这些模型的复杂性,它们的实现和再现性可能很困难。 对于我这种…

图像分割项目中损失函数的选择

文章目录 前言场景:实际项目中,通常会有一个常见的问题:样本不均衡一、focal loss思考 二、Dice loss三、二分类未完待续 前言 在图像分割领域,最基础、最常见的损失当然是交叉熵损失 —— Cross entropy。随着不断的研究&#x…

一个java文件的JVM之旅

准备 我是小C同学编写得一个java文件,如何实现我的功能呢?需要去JVM(Java Virtual Machine)这个地方旅行。 变身 我高高兴兴的来到JVM,想要开始JVM之旅,它确说:“现在的我还不能进去,需要做一次转换&#x…

OceanBase 如何通过日志观测冻结转储流程?

本文旨在通过日志解析 OceanBase 的冻结转储流程,以其冻结检查线程为切入点,以租户(1002)的线程名为例。 作者:陈慧明,爱可生测试工程师,主要参与 DMP 和 DBLE 自动化测试项目。 爱可生开源社区…

2258. 逃离火灾 : 详解如何从「二分」到「分类讨论」(图解过程)

题目描述 这是 LeetCode 上的 「2258. 逃离火灾」 ,难度为 「困难」。 Tag : 「多源 BFS」、「二分」、「预处理」 给你一个下标从 0 开始大小为 m x n 的二维整数数组 grid,它表示一个网格图。 每个格子为下面 个值之一: 0 表示草地。 1 表…

【狂神说Java】SpringSecurity+shiro

✅作者简介:CSDN内容合伙人、信息安全专业在校大学生🏆 🔥系列专栏 :【狂神说Java】 📃新人博主 :欢迎点赞收藏关注,会回访! 💬舞台再大,你不上台&#xff0c…

ShuffleNet系列 网络结构

文章目录 ShuffleNet V1Channel Shuffle:通道打散SuffleNet UnitModel Architecture实验结果 ShuffleNet V2Guideline 1Guideline 2Guideline 3Guideline 4模型结构代码 论文:ShuffleNet: ShuffleNet: An Extremely Efficient Convolutional Neural Netw…

2023年的低代码:数字化、人工智能、趋势及未来展望

本文由葡萄城技术团队发布。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前言 正如许多专家预测的那样,低代码平台在2023年将展现更加强劲的势头。越来越多的企业正在纷纷转向低代…

ArcGIS 气象风场等示例 数据制作、服务发布及前端加载

1. 原始数据为多维数据 以nc数据为例。 首先在pro中需要以多维数据的方式去添加多维数据,这里的数据包含uv方向: 加载进pro的效果: 这里注意 数据属性需要为矢量uv: 如果要发布为服务,需要导出存储为tif格式&…

spring 中 @Validated/@Valid

超级好的链接 添加链接描述

Vue实现面经基础版案例(路由+组件缓存)

一、面经基础版-案例效果分析 1.面经效果演示 2.功能分析 通过演示效果发现,主要的功能页面有两个,一个是列表页,一个是详情页,并且在列表页点击时可以跳转到详情页底部导航可以来回切换,并且切换时,只有…