element-ui中在多个tab切换之下的表格数据出现错乱

最新推荐文章于 2024-11-14 18:34:06 发布

m0_57082996

最新推荐文章于 2024-11-14 18:34:06 发布

阅读量2.2k

点赞数 1

文章标签： ui

本文链接：https://blog.csdn.net/m0_57082996/article/details/122107642

版权

当多个table切换使用了v-if后由于表格的长短不一，会出现数据错乱

比如table1中第一个列表是多选，table2中第一个列表是名称，但是使用v-if在切换到第二个table中时第一个列表显示的是多选

解决办法：把v-if换成v-show

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

m0_57082996

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

element-ui表格数据转换的示例代码

10-18

本文详细地介绍了在Element UI中进行表格数据转换的示例代码，并通过具体的业务场景来阐述如何应用这些代码。文章通过一个具体的需求情景——即如何将后台返回的数值或代号转换为更具可读性的文字描述——来展示如何...

【工作】-处理快速切换 Tab 导致列表数据不正确的情况

weixin_46254175的博客

09-22

814

取消之前的请求：在切换到新的 Tab 之前，首先检查是否有之前的请求正在进行中。如果是，可以使用取消请求的机制中止之前的请求，以确保不会更新当前 Tab 的数据。缓存请求结果：你可以在切换 Tab 时，将已获取的数据缓存起来，以避免重复请求相同的数据。当切换回之前已经获取过的 Tab 时，直接从缓存中获取数据进行展示，而不发起新的请求。防止并发请求：为了避免并发请求导致数据不正确，你可以在发起新请求之前添加一个标记来检查是否已有请求正在进行中。如果有，则不发起新请求，或者等待之前的请求完成后再发起新请求。

参与评论您还未登录，请先登录后发表或查看评论

Tab切换过快导致数据紊乱

wang_fu_gui_ya的博客

09-19

1148

这是一个典型左侧切换tab，右侧内容区根据tab切换刷新请求数据，当我们切换tab内容正在loading中再次切换其他tab就会导致数据紊乱。当我们试用queueRequest 函数连续调取接口时，第一个接口完成才回去执行第二个接口，但是bug依在。网上还有一种方法就是要修改底层axios去解决，这种方法不顺我心，所以没去做。最后解决方法还是我把问题想的太复杂了，在接口函数中增加tab的校准再赋值。初步解决以为是第二个接口比第一个快导致，所以我写了一个任务队列。

解决el-table多表格切换数据混乱

weixin_42504805的博客

07-01

3290

el-table多表格切换数据混乱

ele 多个表格 tab切换后多选, 复选出现的问题

GCC_Chason的博客

05-17

331

ele 多个表格 tab切换后多选, 复选出现的问题

el-table数据污染问题

qq_48039668的博客

11-24

489

el-table数据渲染时的污染问题解决有的时候用一个表去渲染从后台传来的不同数据时，当数据发生改变，但表中的数据会被改变之前的数据污染，只需要加一个属性就解决了给el-table标签上加一个row-key用来绑定数据，优化table的渲染。能轻松帮助我们解决数据污染问题 ...

element-table出现错位解决方法

weixin_44384273的博客

09-14

1343

element table 错位

vue + elementUI 表格相互切换时内容显示异常问题

lwx931449660的博客

01-28

3158

这次做项目的时候遇到需要再同一个页面切换展示多个table的需求，然而再完成之后遇到一个问题：表格之间切换的时候会出现内容消失和无辜出现的现象，感觉对vue掌握的还不好，这里记录一下。先奉上解决办法：Vue+ElementUI项目中条件渲染切换表格时单元格内容显示异常的问题及解决方法在面试的时候，面试官 ...

element-ui.rar element-ui核心库压缩包

12-20

这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要工具。 Element UI 的设计理念是简洁、易用，它的组件设计遵循 Material Design 规范，同时考虑到国内用户的...

element-ui表格合并span-method的实现方法

10-16

在Element-UI框架中，表格（`el-table`）组件提供了强大的功能，其中包括表格单元格的合并。在处理复杂表格布局时，有时我们需要合并某些行或列以展示更清晰的数据结构。`span-method`属性正是为此目的而设计的，它...

element-demi:在Vue 2 3中使用Element UI的适配器

05-09

一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具该库旨在测试postinstall npm挂钩。安装完所有软件包之后。该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...

element-ui 表格数据时间格式化的方法

12-02

标题中的“element-ui 表格数据时间格式化的方法”主要涉及了如何将后台返回的以毫秒为单位的时间戳转换为用户友好的日期时间格式。后台返回的时间格式可能是 `/1470220594000/` 这样的字符串，它代表的是距离 Unix ...

element-ui中使用el-table ，el-table-column循环列发现列错乱解决方法

m0_55074611的博客

03-21

4692

由于需要动态循环列展示表格而不得不套一层div标签时会造成表格列错乱的想象，这是因为el-table中不允许有除el-table-column标签以外的元素。

怎样切换tab显示不同的数据

夏天的博客

07-30

1257

1.需求点击不同的tab选项卡，会切换到不同的内容项目 2.实现在成功调用接口后，数据展示如图所示 3.代码以下为主要代码的逻辑解读this.query.auditType = 4;意思就是访问后台的数据的状态类型为4（根据接口文档给出的），用Switch条件读出来。 // 访问后台的数据 query: { current: 1, auditType: "", }, // 后台返回的数据 dataList: { rows: [{}], }, curre

elemetui 解决同个页面，同时使用多个el-table表格组件导致的数据错乱

DarlingYL的博客

11-10

2246

在一个页面中，使用了饿了么框架的3个el-table表格，3个表格平级，只不过是根据条件判断渲染哪个表格。本来以为使用v-if就可以隔离，没想到还是出现了问题，因为3个表格中有几列绑定的字段一模一样，导致了数据错乱，A列的数据绑定到了B列……离谱。

element中同一个一面使用两个table,使用v-if判断显示，数据混乱

qq_35500778的博客

04-28

1033

错误：在一个页面中使用两个table,绑定不同的数据，并且在table中row中使用<tempale></template>,后两个table表的数据混乱使用；解决方法：在table上添加key属性值，两个table的key值不同即可 ...

element表格之表头代码改进

S2763427717的博客

08-31

233

element表头代码改进

Element el-select - 切换单多选时显示问题

老电影故事的博客

04-14

798

代码中使用了 v-if 安照常理，如果我切换了就会销毁，但是效果并不是这样，因为 vue复用了< el-select >中的input。也就是说根本原因是： vue 在切换的过程中，认为input不需要销毁重建，所以直接复用了。如何告诉vue 单选和多选不要复用呢？答案是 ----- 添加key 这里引用下官方文档。这里选择科目后，我再切换到柱状图，按道理是要这样。vue出于提高性能，所以 vue 给复用了。这是啥问题呢，一开始百思不得其解。

PVE纵览-安装系统卡“Loading Driver”的快速解决方案