【解决问题】---- 解决 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.mzph.cn/news/137412.shtml

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

相关文章

【论文阅读】多模态NeRF:Cross-Spectral Neural Radiance Fields

https://cvlab-unibo.github.io/xnerf-web intro 从不同的light spectrum sensitivity获取信息,同时需要obtain a unified Cross-Spectral scene representation – allowing for querying, for any single point, any of the information sensed across spectra。…

@Autowired注入其他模块的bean失败

一、在Spring Boot中,如果要自动扫描和创建bean,需要在应用的启动类上使用ComponentScan注解来指定要扫描的包。确保你已经将GlobalConfig类所在的包和父包都添加到了ComponentScan注解的value属性中。 例如,如果GlobalConfig类所在的包为com…

CAN轴【禾川】

禾川CAN轴有问题。 厂家说是只能使用禾川的伺服X2EN,和X3EN 添加CAN主站: 网络: 0 波特率: 1000K 添加CAN总线: 主站: 2 同步帧: 80h 设置刷新时间 时间帧:100h 添加伺服&…

Vue el-table序号与复选框hover切换

效果图下&#xff1a; <template><div class"container"><el-tableref"multipleTable"id"multipleTable":data"person.tableData"cell-mouse-enter"cellEnter"cell-mouse-leave"cellLeave"selecti…

VSCode remote-ssh 连接远端服务器失败

系统 Mac os Intel处理器 描述 该问题在上午时还没有&#xff0c;下午突然毫无征兆的发生&#xff0c;当时没有更新vscode&#xff0c;没有更新插件。 分析 网上对于该问题的答案多是说磁盘空间不够vscode不能下载相应插件&#xff0c;我所遇到的并不是这种情况。报的错误多是…

Leetcode-LCR 021 删除链表的倒数第 N 个结点

快慢指针&#xff0c;快指针先移动n-1个节点后&#xff0c;慢指针从虚拟头结点出发&#xff08;相当于快慢指针相隔n个节点&#xff09;&#xff0c;快慢指针一起向链表尾依次移动一个结点&#xff0c;当快指针移动到表位时&#xff0c;慢指针正好移到被删除元素的前一个结点&a…

基于$indexStats 构建mongodb 所有集合的索引监控程序

使用mongodb时&#xff0c;为集合中经常查询的字段添加索引&#xff0c;能够提高查询效率&#xff0c;减少扫描数据次数&#xff0c;限制扫描数据量&#xff0c;减少排序时间和内存与CPU的消耗。但索引的更新会为数据的添加和更新带来额外的消耗。因此&#xff0c;需要定期检查…

Python数据容器(字符串)

字符串 1.字符串 字符串也是数据容器的一种&#xff0c;字符串是字符的容器&#xff0c;一个字符串可以存放任意数量的字符。 2.字符串的下标索引 从前向后&#xff0c;下标从0开始从后向前&#xff0c;下标从-1开始 # 通过下标索引获取特定位置的字符 name python print(na…

关于使用template时的错误注意

今天在写c程序的时候&#xff0c;在使用template时遇到了一个关于template的错误用法。代码如下#include <vector> #include <algorithm> #include <forward_list> #include <string> #include <list> using namespace std; template <typena…

TinyEngine 开源低代码引擎首次直播答疑QA合集

前言 10月27日晚8点&#xff0c;OpenTiny 社区开启了 TinyEngine 开源低代码引擎首次答疑直播&#xff0c;本次直播我们通过收集开发者诉求&#xff0c;精心策划和组织了内容&#xff0c;希望提供给大家最明确和清晰的答疑方式。这是 TinyEngine 低代码引擎直播计划的开端&…

React处理用户交互事件,如点击、输入框变化等,并使用事件处理函数来响应这些事件

在 React 中处理用户交互事件&#xff0c;如点击、输入框变化等&#xff0c;需要使用事件处理函数来响应这些事件。以下是一些学习和使用事件处理函数的基本步骤&#xff1a; 绑定事件处理函数&#xff1a; 首先&#xff0c;在你的组件中为要处理的元素&#xff08;如按钮、输…

探索OpenCV中直方图的神奇之处:应用与实现

文章目录 导言&#xff1a;直方图概述&#xff1a;函数原型参数说明&#xff1a;代码示例 应用场景&#xff1a;结语&#xff1a; 导言&#xff1a; 直方图是数字图像处理中一个强大而重要的工具&#xff0c;它通过可视化数据的分布情况&#xff0c;帮助我们更好地理解图像的特…

Flutter 第三方 flutter_screenutil(屏幕适配)

一直觉得自己写的不是技术&#xff0c;而是情怀&#xff0c;一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的&#xff0c;希望我的这条路能让你们少走弯路&#xff0c;希望我能帮你们抹去知识的蒙尘&#xff0c;希望我能帮你们理清知识的脉络&#xff0…

【Royalty in Wind 2.0.0】个人体测计算、资料分享小程序

前言 Royalty in Wind 是我个人制作的一个工具类小程序。主要涵盖体测计算器、个人学习资料分享等功能。这个小程序在2022年第一次发布&#xff0c;不过后来因为一些原因暂时搁置。现在准备作为我个人的小程序重新投入使用XD PS&#xff1a;小程序开发部分我是在21年跟随郄培…

vue3异步组件

父组件中&#xff0c;子组件的加载一般是按照先后顺序加载的&#xff0c;子组件加载后才会加载父组件。 一个页面的子组件很多&#xff0c;由于会先加载子组件&#xff0c;那么父组件可能会出现比较长的白屏等待时间 大型项目&#xff0c;可能需要拆分应用为更小的块&#xf…

FL Studio21.2宿主软件中文免费版下载

纵观当下宿主软件市场&#xff0c;正值百家争鸣、百花齐放之际像Mac系统的Logic Pro X、传统宿主软件代表Cubase、录音师必备Pro Tools、后起之秀Studio One等&#xff0c;都在各自的领域具有极高的好评度。而在众多宿主软件中&#xff0c;有这么一款历久弥新且长盛不衰的独特宿…

JAVA判断指定日期是否在指定的时间段内

参考文献: Java语言判断当前时间在时间范围内_java判断时间区间-CSDN博客 package com.itheima.method2;import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date;public class DateTest {public static voi…

sqli-bypass wp

sqli-bypass靶场 level 1 尝试注入点 1 ,1&#xff0c;1,1",1"" 》存在字符型单引号注入 id1and(1)-- >提示存在sql注入 bypass and、()、--都可能存在被屏蔽掉 尝试#代替-- id1and(1)%23 》 正常回显&#xff0c;说明–被屏蔽了&#xff0c;and&#xf…

VScode 右键没有转到定义等的菜单

问题&#xff1a; 右键点击该函数出现的结果只能是这样的&#xff1a; 解决&#xff1a; 通过修改 settings.json 文件&#xff0c;以解决问题&#xff1a; 这是原来有问题的配置&#xff1a; {"python.autoComplete.extraPaths": ["/home/robot/1-temp_mak…

数据库SQL

数据库&SQL 数据库基本概念数据库DataBase定义 数据库管理系统(DBMS)定义在JAVA项目中与数据库的结合数据库管理系统中常见的概念库与表的关系 SQL数据类型数字类型浮点类型字符类型TEXT类型日期类型 SQL语言的分类DDL:数据定义语言修改表结构的注意事项 DML:数据操作语言D…