【解决问题】---- 解决 avue-crud 表格勾选数据翻页后界面保持选中
1. 错误预览
-
第一页选择【7、8、9、10】

-
直接点击第三页未进行选择

-
直接点击第四页未进行选择

2. 问题总结
- 通过测试可以看到,页面的选择项会影响到其他页面的选择;
- 点击保存,返回的数据却是真真选择的数据;
- 数据在选择渲染的时候出现了混乱。
3. 分析问题原因
- 其实这就是 vue 中列表渲染的 key 作为唯一标识,在设置的时候没有给表格添加上。
4. 解决办法
4.1 解决方案一:设置一个表格 row 的唯一标识
- selection 配置表格是否可选择;
- reserveSelection 在数据更新之后保留之前选中的数据;
- rowKey 行数据的 Key,用来优化 Table 的渲染(注意:rowKey 必须是表格列表中的唯一标识,如果存在重复,依然会出现渲染错误)。
selection: true,reserveSelection: true,rowKey: 'spuId',
4.2 解决方案二:列表后端返回时就返回一个唯一标识的id属性【或者前端构建一个】

5. 官方文档
官方文档: avue-crud 的 option 配置
5.1 reserveSelection 的默认值和解释

5.2 rowKey 的默认值和解释

6. 总结
- 由于配置属性太多,开发的时候都是需要什么,再去找什么,所以此篇博客作为一个记录,方便后期出现相同或类似问题进行查找;
- 分析出现问题的原因,去查找文档对应的设置,完善配置;
- 开发的时候,查看文档细心一点阅读,可以避免开发中遇到的大多数问题。
相关文章:
【解决问题】---- 解决 avue-crud 表格勾选数据翻页后界面保持选中
1. 错误预览 第一页选择【7、8、9、10】 直接点击第三页未进行选择 直接点击第四页未进行选择 2. 问题总结 通过测试可以看到,页面的选择项会影响到其他页面的选择;点击保存,返回的数据却是真真选择的数据;数据在选择渲染…...
JL-03小型气象站气象环境在线监测设备自动上传并保存数据
JL-03小型气象站产品概述 小型气象站用于对风速、风向、雨量、空气温度、空气湿度、太阳辐射、光照强度、土壤温度、土壤湿度、蒸发量、大气压力等气象要素进行现场监测。既可以通过无线通讯将数据传送至云平台,又可以通过配套的数据采集通讯线与计算机进行连接&am…...
Ansible的变量(vars,register,set_fact)
环境 控制节点:Ubuntu 22.04Ansible 2.10.8管理节点:CentOS 8 概述 vars :Ansible关键字,用在play、role、block、task上register :Ansible关键字,用在task上。注意它是一个返回值,可能需要用…...
麒麟KYLINIOS软件仓库搭建03-软件仓库添加新版本的软件包
原文链接:麒麟KYLINIOS软件仓库搭建03-软件仓库添加新版本的软件包 hello,大家好啊,今天给大家带来麒麟桌面操作系统软件仓库搭建的文章03-软件仓库添加新版本的软件包,本篇文章主要给大家介绍了如何在麒麟桌面操作系统2203-x86版…...
监控系统是怎么组的(sentry)
搭建sentry监控平台,实现前后端异常监控。——从零开始搭建一个高颜值后台管理系统全栈框架(十六) - 掘金...
Java --- 直接内存
一、直接内存 1、不是虚拟机运行时数据区的一部分,也不是《Java虚拟机规范》中定义的内存区域。 2、直接内存是在Java堆外的,直接向系统申请的内存区间。 3、来源于NIO,通过存在堆中的DirectByteBuffer操作Native内存。 4、访问直接内存的…...
数据结构与算法之排序: Leetcode 21. 合并两个有序链表 (Typescript版)
合并两个有序链表 https://leetcode.cn/problems/merge-two-sorted-lists/ 描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1 输入:l1 [1,2,4], l2 [1,3,4] 输出:[1,1,2,3,4,4]示例 …...
AIGC:使用bert_vits2实现栩栩如生的个性化语音克隆
1 VITS2模型 1.1 摘要 单阶段文本到语音模型最近被积极研究,其结果优于两阶段管道系统。以往的单阶段模型虽然取得了较大的进展,但在间歇性非自然性、计算效率、对音素转换依赖性强等方面仍有改进的空间。本文提出VITS2,一种单阶段的文本到…...
2023年CKA考试真题及注意事项
2023年CKA考试真题及注意事项 注意事项考试题目原题解析1.RBAC2.节点维护3.K8S组件升级 1.28.0升级到1.28.14.Etcd备份与恢复5.NetworkPolicy6.Service7.Ingress8.指定节点部署9.检查Node节点健康状态10.一个Pod多个容器11.监控Pod度量指标12.监控Pod日志13.PersistentVolumeCl…...
云计算运维面试
一、Linux的启动过程 1.加电 2.加载bios设置 3.加载grub 4. 加载内核系统到内存中 5.加载配置文件 6.加载内核模块 7.完成相应初始化工作和启动相应服务 8.启动系统进程 9.出现登录界面 10.开机自启动完成 二、查看系统的版本和内核 1、 查看版本 cat /etc/redha…...
Qt实现TCP调试助手 - 简述如何在Qt中实现TCP多并发
简介 软件开发中,可能经常会用到TCP调试工具。本人使用QT开发了一款TCP调试工具,方便大家使用。本文章主要介绍下,该工具的功能,以及如何在Qt中实现TCP服务器的并发。 界面展示 安装界面 桌面图标。安装后会生成桌面图标&#…...
【Python OpenCV】OpenCV介绍
文章目录 前言一、OpenCV简介二、基本功能三、实际应用场景四、Python安装OpenCV总结 前言 OpenCV(Open Source Computer Vision Library)是一个开源的计算机视觉和图像处理库,它提供了丰富的工具和函数,用于处理图像和视频。由于…...
11-09 周四 CNN 卷积神经网络基础知识
11-09 周四 CNN 卷积神经网络 时间版本修改人描述2023年11月9日09:38:12V0.1宋全恒新建文档 简介 学习一下CNN,卷积神经网络。使用的视频课程。视觉相关的任务: 人脸识别 卷积网络与传统网络的区别: <img altimage-20231109094400591 s…...
Vue.js中的路由(router)和Vue Router的作用?
聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…...
从开源项目聊鱼眼相机的“360全景拼接”
目录 概述 从360全景的背景讲起 跨过参数标定聊透视变化 拼接图片后处理 参考文献 概述 写这篇文章的原因完全源于开源项目(GitHub参阅参考文献1)。该项目涵盖了环视系统的较为全貌的制作过程,包含完整的标定、投影、拼接和实时运行流程。该篇文章主要是梳理全…...
网络安全——
文章目录 网络安全TCP/IP与网络安全网络安全构成要素加密技术基础 网络安全 TCP/IP与网络安全 起初,TCP/IP只用于一个相对封闭的环境,之后才发展为并无太多限制、可以从远程访问更多资源的形式。因此,“安全”这个概念并没有引起人们太多的…...
用excel 整理工作流程,以周为时间节点,自动统计进度
无论是处理自己还是团队的工作,我们都经常会遇到复杂的,凌乱的,需要多个环节才能完成的工作。 梳理工作流程 因为环节内容,每个环节处理不当都可能会导致我们整个工作目标实现受到影响,所以通过工作流程图,…...
Wireshark学习 与 TCP/IP协议分析
Wireshark简介和工具应用 如何开始抓包? 打开wireshark,显示如下网络连接。选择你正在使用的,(比如我正在使用无线网上网),双击 可以先看下自己的ip地址和网关ip地址(看抓包数据时候会用到&…...
Sequence(矩阵连乘+数论)
求Fn mod 1e97 Input 第一行是一个t代表有t组数据 接下来有t行每行有6个整数A,B,C,D,P,n 1<t<10 0<A,B,C,D<1e9 1<p,n<1e9 Output 输出一个答案Fn对1e97取余 Sample Input 2 1 1 1 1 1 5 1 1 1 1 10 4 Sample Output 9 10 思路: p/n上…...
集合工具类的常用方法--小总和
前言 集合工具类是Java中的一个重要工具类,在Java常用的集合框架中起到了重要的作用。集合工具类提供了一系列的方法,可以方便地处理Java中的集合对象,提高了开发的效率。 Collections类 Collections.sort(List<T> list) 对List集合进…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵,其中每行,每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid,其中有多少个 3 3 的 “幻方” 子矩阵&am…...
[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.
ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #:…...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)
引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...
elementUI点击浏览table所选行数据查看文档
项目场景: table按照要求特定的数据变成按钮可以点击 解决方案: <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板(STM32F103RBT6)通过I2C驱动ICM20948九轴传感器,实现姿态解算,并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化,适合嵌入式及物联网开发者。在基础驱动上新增…...
