el-table 多表格弹窗嵌套数据显示异常错乱问题

1、业务背景

使用vue+element开发报表功能时,需要列表上某列的超链接按钮弹窗展示,在弹窗的el-table列表某列中再次使用超链接按钮点开弹窗,以此类推多表格弹窗嵌套,本文以弹窗两次为例
最终效果如下示例页面
多表格弹窗嵌套示例图

2、具体实现和问题抛出

<template><div class="el_main"><el-tablestripestyle="width: 100%"v-loading="loading"row-key="Id":data="list"><el-table-column label="ID" prop="Id" min-width="3"> </el-table-column><el-table-column label="类型" prop="Type" min-width="5"><template slot-scope="scope">{{ formatTaskType(scope.row.Type) }}</template></el-table-column><el-table-column label="详情" prop="TaskTitle" min-width="10" show-overflow-tooltip="true"></el-table-column><el-table-columnlabel="详情弹窗" min-width="3"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text">查看</el-button></template></el-table-column><el-table-column label="创建时间" prop="AddTime" min-width="5"><template slot-scope="scope" v-if="scope.row.AddTime">{{ (scope.row.AddTime * 1000) | formatDate(2) }}</template></el-table-column></el-table></div><!-- 详情弹窗 --><el-dialogtitle="详情弹窗":visible.sync="detailInfoDialogVisible"append-to-bodywidth="50%"><el-tablestripestyle="width: 100%"v-loading="loading"row-key="Id"height="300" max-height="650":data="detailInfo"><el-table-column label="ID" prop="TaskId" min-width="80"></el-table-column><el-table-column label="名称" prop="TaskName" min-width="65"></el-table-column><el-table-column label="成功数量" prop="SuccessNum" min-width="22"></el-table-column><el-table-column label="失败数量" prop="ErrorNum" min-width="22"></el-table-column><el-table-column label="状态列表" min-width="22"><template slot-scope="scope"><el-button @click="handleStatusListClick(scope.row)" type="text">查看</el-button></template></el-table-column><el-table-column label="队列列表" min-width="30"><template slot-scope="scope"><el-button @click="handleQueueDataClick(scope.row)" type="text">查看</el-button></template></el-table-column></el-table></el-dialog><!-- 状态列表弹窗 --><el-dialogtitle="状态弹窗":visible.sync="statusListDialogVisible"append-to-bodywidth="30%"><el-tablestripestyle="width: 100%"v-loading="loading"row-key="Id"height="300" max-height="300":data="statusListInfo"><el-table-column label="ID" prop="Id" min-width="80" show-overflow-tooltip="true"> </el-table-column><el-table-column label="标题" prop="Title" min-width="80" show-overflow-tooltip="true"></el-table-column><el-table-column label="返回信息" prop="Msg" min-width="80" show-overflow-tooltip="true"></el-table-column></el-table></el-dialog><!-- 队列列表弹窗 --><el-dialogtitle="队列弹窗":visible.sync="queueDataDialogVisible"append-to-bodywidth="30%"><el-tablestripestyle="width: 100%"v-loading="loading"row-key="Id"height="300" max-height="300":data="queueDataInfo"><el-table-column label="ID" prop="Id" min-width="80" show-overflow-tooltip="true"> </el-table-column><el-table-column label="名称" prop="Name" min-width="80" show-overflow-tooltip="true"></el-table-column></el-table></el-dialog>
</template><script type="text/ecmascript-6">
import { GetXXXReportList, ExportXXXReportList } from '@/api/reportManage'const urlQuery = ['id|number','type|number','currPage|number','pageSize|number',
]export default {components: {},data () {return {id: '',type: '',collectTime: '',loading: false,list: [],currPage: 1,pageSize: 10,counts: 0,detailInfo: [], // 详情弹窗detailInfoDialogVisible: false,statusListInfo: [], // 状态列表弹窗statusListDialogVisible: false,queueDataInfo: [], // 队列列表弹窗queueDataDialogVisible: false,typeArray: [{value: 1,label: '类型一',},{value: 2,label: '分类二',},{value: 3,label: '分类三',},{value: 4,label: '分类四',},{value: 5,label: '分类五',},{value: 6,label: '分类六',},],exportLoading: false,}},created () {this._getList(true)},methods: {async _getList (init = false) {this.loading = trueif (init) {this.currPage = 1}let startTime, endTimeif (this.collectTime) {startTime = this.collectTime[0] / 1000endTime = this.collectTime[1] / 1000 + 86399}this._setQuery(urlQuery)try {const data = await GetXXXReportList({Id: this.id || 0,StartTime: startTime || 0,EndTime: endTime || 0,Type: this.type || 0,CurrPage: this.currPage,PageSize: this.pageSize,})this.list = data.Listthis.counts = data.Counts } catch (error) {this.counts = 0this.list = []}this.loading = false},search () {this._getList(true)},reset () {this.id = ''this.type = ''this.collectTime = ''this.list = []this.counts = 0this._getList(true)},pageChange () {this._getList()},pageSizeChange (val) {this.pageSize = valthis._getList(true)},handleClick (row) {if (row.Type === 1) {this.detailInfoDialogVisible = truethis.detailInfo = row.detailInfo } else if (row.Type === 2) {this.xxxDialogVisible = truethis.xxxInfo = row.xxx} else if (row.Type === 3) {this.xxxDialogVisible = truethis.xxxInfo = row.xxx}},handleStatusListClick (row) {this.statusListDialogVisible = truethis.statusListInfo = row.StatusList},handleQueueDataClick (row) {this.queueDataDialogVisible = truethis.queueDataInfo = row.queueData},// 导出async exportData () {this.exportLoading = truelet startTime, endTimeif (this.collectTime) {startTime = this.collectTime[0] / 1000endTime = this.collectTime[1] / 1000 + 86399}try {const data = await ExportXXXReportList({Id: this.id || 0,StartTime: startTime || 0,EndTime: endTime || 0,Type: this.type || 0,})var raw = window.atob(data)var uInt8Array = new Uint8Array(data.length)for (var i = 0; i < raw.length; i++) {uInt8Array[i] = raw.charCodeAt(i)}const url = window.URL.createObjectURL(new Blob([ uInt8Array ], { type: 'application/vnd.ms-excel' }))const link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', 'xxxx报表.xlsx')document.body.appendChild(link)link.click()document.body.removeChild(link)} catch (error) {this.exportLoading = false}this.exportLoading = false},},
}
</script><style lang="scss">
</style>

3、分析问题

这里有几个可能的原因和建议来解决这个问题:
①数据问题:首先确保你的数据源是正确的。检查你的表格数据是否有任何错误或遗漏。
②嵌套表格的渲染时机:如果你的嵌套表格(子表格)是在父表格的某一行展开时才渲染的,那么你需要确保子表格的数据在正确的时机进行加载。如果数据加载过早,可能会导致异常。
③弹窗的v-if与v-show:如果你使用了v-if来控制弹窗的显示与隐藏,那么每次弹窗打开都会重新渲染弹窗内的内容。这可能会导致表格的重新初始化,使用v-show可能会避免这个问题。但需要注意的是,v-show只是在视觉上隐藏元素,元素仍然会被渲染。
④表格的key:如前面所说,Vue使用key来追踪节点的身份。如果在嵌套表格的场景中,你使用了相同的key,可能会导致身份识别混乱。确保每个表格都有一个独特的key。
⑤样式冲突:确保没有其他样式影响到表格或弹窗的正常显示。特别是当你使用了自定义样式或与Element UI样式冲突的其他UI库时。
⑥组件版本:确保你使用的Element UI是最新的版本。旧版本可能存在已知的错误,而在新版本中可能已经被修复。

4、解决问题

下面我从表格的key角度解决下问题
1)尝试给每个弹窗的el-table加个key – 未解决数据错乱的问题
示例代码如下:

<el-table:key="Id"stripestyle="width: 100%"v-loading="loading"row-key="Id"height="300" max-height="300">
</el-table>

2)尝试给每个弹窗的el-table加个唯一的key – 解决数据错乱的问题
示例代码如下:

<el-table:key="Id"stripestyle="width: 100%"v-loading="loading"row-key="Id"height="300" max-height="300">
</el-table>

虽然此种方法解决了我们的问题,但是考虑到每次打开弹窗都会生成随机数存在一定风险性,具体分析如下:

    随机数改变了每次渲染时的key值,打破了Vue的节点身份追踪机制。
    在这种情况下,由于每次渲染都有一个新的随机数作为key,Vue会将该组件视为全新的节点,从而重新渲染。这样可以避免由于身份追踪导致的问题,例如在嵌套表格场景中可能出现的报错。
    然而,需要注意的是,使用随机数作为key并不是一个推荐的做法。因为key的主要作用是帮助Vue高效地识别和追踪节点的身份,以便进行差异化更新。随机数作为key会破坏这一机制,可能导致性能下降和潜在的问题。
    因此,尽管使用随机数作为key可以解决某些情况下的报错,但并不是一个优雅的解决方案。更好的方式是仔细排查问题,找到导致报错的根本原因,并采取相应的措施进行修复。如果实在无法找到其他解决方案,再考虑使用随机数作为临时方案。但在长期开发中,仍然建议寻求更合适、更稳定的解决方案。

3)尝试给每个弹窗的el-table加个唯一的key(固定不是随机数) – 解决数据错乱的问题(推荐)
示例代码如下:

<el-table:key="generateKey(scheduledDataDownloadInfo)"stripeheader-row-class-name="bos_table_header"style="width: 100%"v-loading="loading"row-key="Id"height="300" max-height="650":data="scheduledDataDownloadInfo">
</el-table>

在methods中添加方法

// 生成唯一的key,可以根据具体情况定义
generateKey (data) {const uniqueIdentifier = data.map(item => item.Id).join('_')return `table_${uniqueIdentifier}`
},

至此,更合适、更稳定的解决方案完成,我们开头提到的问题得以解决。有更好办法或者见解的同学欢迎评论区留言,互相学习。

若本文有帮助到阅读本文的同学,欢迎点赞、关注、收藏,互相学习交流

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/187541.html

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

相关文章

HIT_OS_LAB3 操作系统的引导

操作系统实验三 3.1. 实验目的 熟悉实验环境&#xff1b;建立对操作系统引导过程的深入认识&#xff1b;掌握操作系统的基本开发过程&#xff1b;能对操作系统代码进行简单的控制&#xff0c;揭开操作系统的神秘面纱。 3.2. 实验内容 3.2.1. 改写 bootsect.s 主要完成如下功…

Vue3使用vue-print-nb插件打印功能

插件官网地址https://www.npmjs.com/package/vue-print-nb 效果展示: 打印效果 根据不同的Vue版本安装插件 //Vue2.0版本安装方法 npm install vue-print-nb --save pnpm install vue-print-nb --save yarn add vue-print-nb//Vue3.0版本安装方法&#xff1a; npm install vue3…

ArcGIS进阶:水源涵养功能分级评价操作

首先抛出水源涵养重要性评价的公式&#xff1a;水源涵养量降雨量-蒸散发量-地表径流量&#xff0c;其中地表径流量降雨量*平均地表径流系数 声明&#xff1a;以下数据来源于来自于牛强老师书籍&#xff08;城乡规划GIS技术&#xff09;。 以下给出重要性评价阈值表&#xff1…

linuxC语言缓冲区及小程序的实现

文章目录 1.文件缓冲区1.1介绍1.2缓冲文件系统1.3冲刷函数fflush1.4认识linux下的缓冲区 2.linux小程序的实现2.1 回车\r和换行\n2.2倒计时程序2.3进度条小程序sleep/usleep代码运行结果 1.文件缓冲区 1.1介绍 为缓和 CPU 与 I/O 设备之间速度不匹配&#xff0c;文件缓冲区用以…

玄子Share-HTML5知识手册

玄子Share-HTML5知识手册 前言&#xff1a; 这一版 HTML 笔记&#xff0c;算是我写的第四版了&#xff0c;第三版对照课本编写&#xff0c;第四版则是对照 MDN 官方文档编写&#xff0c;不论是术语亦或专业性&#xff0c;都更上一层 文章依托 MDN 文档&#xff0c;拓展了大量课…

基于SSM的汽车在线租赁管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

skynet学习笔记02— skynet介绍、skynet基础API与环境变量

01、Skynet与Actor模型 在系统Skynet之前&#xff0c;先了解一下Skynet与Actor模型&#xff0c;下列是风云大佬的介绍以及一个大佬的博客 https://github.com/cloudwu/skynet/wiki/GettingStartedhttps://blog.csdn.net/qq769651718/article/details/79432793 02、Skynet基础…

11.7加减计数器,可置位~,数字钟分秒,串转并,串累加转并,24位串并128,流水乘法器,一些乘法器

信号发生器 方波&#xff0c;就是一段时间内都输出相同的信号 锯齿波就是递增 三角波就是先增后减 加减计数器 当mode为1则加&#xff0c;Mode为0则减&#xff1b;只要为0就输出zero 这样会出问题&#xff0c;因为要求是十进制&#xff0c;但是这里并没有考虑到9之后怎么办&a…

Python编程——模块、包和__init__.py

1. 模块 Python中的一个文件即为一个模块(Module)&#xff0c;一个模块引用另外一个模块的变量、函数或类时&#xff0c;使用import来导入。模块名即文件名。 如fibo.py 文件下有如下代码&#xff1a; def fib(n): # write Fibonacci series up to na, b 0, 1while a <…

18 Linux 阻塞和非阻塞 IO

一、阻塞和非阻塞 IO 1. 阻塞和非阻塞简介 这里的 IO 指 Input/Output&#xff08;输入/输出&#xff09;&#xff0c;是应用程序对驱动设备的输入/输出操作。当应用程序对设备驱动进行操作的时候&#xff0c;如果不能获取到设备资源&#xff0c;那么阻塞式 IO 就会将对应应用…

作业提交产品的爽点、痛点和痒点分析以及开源软件介绍

目录 1 爽点1.1 什么是爽点1.2 如何构成爽点1.3 案例 2 痛点2.1 什么是痛点2.2 如何构成痛点2.3 案例分析 3 痒点3.1 什么是痒点3.2 如何构成痒点3.3 案例分析 4 开源软件Canvas LMS4.1 链接地址4.2 简介4.3 特点和功能4.4 功能展示图片 1 爽点 1.1 什么是爽点 即时满足&#…

基于SSM的网络音乐系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

将 ONLYOFFICE 文档编辑器与 С# 群件平台集成

在本文中&#xff0c;我们会向您展示 ONLYOFFICE 文档编辑器与其自有的协作平台集成。 ONLYOFFICE 是一款开源办公套件&#xff0c;包括文本文档、电子表格和演示文稿编辑器。这款套件支持用户通过文档编辑组件扩展第三方 web 应用的功能&#xff0c;可直接在应用的界面中使用。…

深度学习(生成式模型)——Classifier Guidance Diffusion

文章目录 前言问题建模条件扩散模型的前向过程条件扩散模型的反向过程条件扩散模型的训练目标 前言 几乎所有的生成式模型&#xff0c;发展到后期都需要引入"控制"的概念&#xff0c;可控制的生成式模型才能更好应用于实际场景。本文将总结《Diffusion Models Beat …

TortoiseSVN 状态图标不显示的两种解决办法

文章目录 TortoiseSVN 方式解决注册表方式解决 TortoiseSVN 方式解决 在桌面或者资源管理器中鼠标右键打开 TortoiseSVN 设置选择 Icon Overlays (图标覆盖)Status cache&#xff08;状态缓存&#xff09; 选择 ‘Shell’ 选择 Icon Overlays&#xff08;图标覆盖&#xff09;…

uniapp和vue3+ts开发小程序,使用vscode提示声明变量冲突解决办法

在uniapp中&#xff0c;我们可能经常会遇到需要在不用的环境中使用不同变量的场景&#xff0c;例如在VUE3中的小程序环境使用下面的方式导入echarts&#xff1a; const echarts require(../../static/echarts.min); 如果不是小程序环境则使用下面的方式导入echarts&#xff…

MobaXterm 安装+使用

目录 1 下载安装 1.1 官网下载(速度慢) 1.2 WebRA下载(不是最新版) 2 常用功能 2.1 基础设置 2.2 常用功能 1 下载安装 1.1 官网下载(速度慢) 点击MobaXterm官网,按下图↓↓步骤下载 1.2 WebRA下载(不是最新版) 点击WebRA网址,按下图↓↓步骤下载 2 常用功能 2.1 基础设…

科普测量开关电源输出波形的三种方法及电源波形自动化测试步骤

开关电源波形测试就是对开关电源的输出波形进行检测和分析&#xff0c;观察开关电源参数变化&#xff0c;以此来判断开关电源的性能是否符合要求。好的开关电源对于设备以及整个电路的正常运行是非常重要的&#xff0c;因此开关电源输出波形测试是开关电源测试的重要环节&#…

python调用chrome实现网页自动操作

一. 内容简介 python调用chrome实现网页自动操作。 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 2.3代码 链接&#xff1a; 三.主要流程 3.1 下载驱动和插件 调用谷歌浏览器&#xff0c;需要下载浏览器驱动&#xff08;https://registry.npmmirror.co…

conda修改虚拟环境名称

conda 修改虚拟环境名称 conda 不能直接更改名称&#xff0c;但是可以通过克隆环境解决 新建环境&#xff08;克隆旧环境&#xff09; conda create --name 新环境名 --clone 旧环境名 删除原环境 conda remove --name 旧环境名 --all 查看现有环境 conda env list conda i…