【解决问题】---- 解决 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。…

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…

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

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

Python数据容器(字符串)

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

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

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

Flutter 第三方 flutter_screenutil(屏幕适配)

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

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

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

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

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

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…

力扣每日一题 ---- 2906. 构造乘积矩阵

这题很简单(一下就能想到是前缀和的提米)&#xff0c;但是在处理12345上面需要仔细一点&#xff0c;本来我最开始想到的时候全部累乘在除掉当前数&#xff0c;但是这样就没有把12345考虑进去&#xff0c;如果他本身是12345的话&#xff0c;那么除他以外的乘积并不一定是0&#…

rabbitMQ rascal/amqplib报错 Error: Unexpected close 排查

以下是一些可能导致此 RabbitMQ 客户端或任何其他 RabbitMQ 客户端中的套接字读取或写入失败的常见场景 1.错过&#xff08;客户端&#xff09;心跳 第一个常见原因是RabbitMQ 检测到心跳丢失。发生这种情况时&#xff0c;RabbitMQ 将添加一个有关它的日志条目&#xff0c;然…

多测师肖sir_高级金牌讲师_ui自动化po框架版本01

ui自动化po框架 一、po框架 1、基本介绍 &#xff08;1&#xff09;po模式是page object model的缩写&#xff08;简称&#xff1a;po或pom&#xff09; &#xff08;2&#xff09; po模式的核心思想&#xff1a;分层&#xff0c;实现耦合 实现&#xff1a;业务流程与页面元素操…

如何从存档服务器上完全删除PDM用户

当创建新用户时使用“PDM 登录”类型&#xff08;如下图&#xff09;&#xff0c;PDM用户名和密码会存储于存档服务器的注册表中。 存档服务器的注册表位置如下&#xff1a; HKEY_LOCAL_MACHINE\SOFTWARE\SolidWorks\Applications\PDMWorks Enterprise\ArchiveServer\ConisioU…

HTML的初步学习

HTML HTML 描述网页的骨架, 标签化的语言. HTML 的执行是浏览器的工作,浏览器会解析 html 的内容,根据里面的代码,往页面上放东西,浏览器的工作归根结底,还是以汇编的形式在CPU上执行. 浏览器对于html语法格式的检查没有很严格,即使你写的代码有一些不合规范之处,浏览器也会尽可…

分享Python的十大库,这你一定得知道!

文章目录 前言关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资料六、Python兼职渠道 前言 Python为我们提供了非常完善的基础库&#…

c: struct sort descending and ascending in windows and Ubuntu

/*** file StudentStructSort.h* author geovindu,Geovin Du,涂聚文 (geovindu163.com)* ide: vscode c11,c17 Ubuntu 22.4* brief 结构体排序示例* date 2023-11-05* version 0.1* copyright geovindu 站在巨人的肩膀上 Standing on the Shoulders of Giants**/#ifnd…

计算机技术专业CSIT883系统分析与项目管理介绍

文章目录 前言一、学科学习成果二、使用步骤三、最低出勤要求四、讲座时间表五、项目管理 前言 本课程介绍了信息系统开发中的技术和技术&#xff0c;以及与管理信息技术项目的任务相关的方法和过程。 它研究了系统分析师、客户和用户在系统开发生命周期中的互补角色。 它涵盖…