el组件el-table 组件使用v-if的时候位置错乱问题

已于 2023-09-20 17:05:38 修改
阅读量905 收藏
点赞数 3
文章标签： vue.js elementui 前端
于 2023-09-20 17:05:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zzw123456sxy/article/details/133088368
版权

第一种方法，常用方法，添加唯一key   ====== :key="Math.random()"

 第二种法根据组件api提供当组件渲染完毕后调用，先给给组件添加一个ref，然后调用组件提供的api方法，我这里防止未渲染所以加了个挂在后的一个回调钩子

解决！

《Vue3笔记》第33节：Vue3项目中修改el-table表格的默认样式
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
04-21 89
前一个小节的内容中，已经介绍了项目如何基于封装图表组件。这个小节来学习一下，如何修改表格组件的默认样式。Vue3项目开发（微信文章集合）修改之后的表格样式效果，如下所示：修改表格样式，例如：字体颜色、背景颜色、边框等等，只需要添加下面代码即可： 修改表格行的样式，例如：背景颜色、边框、字体大小，颜色等等，只需要添加下面代码： 修改表格的偶数行的背景颜色、当前选中行显示的背景颜色，只需要添加下面代码： 修改表格多选框的样式，添加下面代码： 1.3、完整代码 调整完的表格组件完整代码，如下所示： 1.4、获取源
el-table 树形表格 自定义展开图标_实践一个树形组件
weixin_39916355的博客
10-22 2382
想实践一个树形组件的起因是发现目前主流UI库在树形组件上都没有提供连接线(ant design有，但不知道为什么设计得发虚，就是各元素之间没有严格衔接上，见下图，而Vue生态圈中的Element UI和iView压根都不支持)。对我这种没有钛合金狗眼的人来说常常会看歪了。所以自己想禽兽，啊不，亲手尝试一个。仅仅实践最最基本的树形结构的展现、展开、折叠，不包含高级的多选、拖动、自定义渲染等功能。弄完...
通过v-if动态设置Element表格列时，出现表格列显示错乱、表头闪动等问题
你的阿迁
06-14 3525
在生命周期函数beforeUpdate中调用表格的 doLayout() 方法 （尽量加上可选链，不然可能存在获取不到table实例，造成doLayout为undefined的情况）在实际开发， 我们经常会通过v-if控制表格列的显隐，来实现不同条件下展示不同的表格列，这时候就可能会出现表格列显示错乱、以及表头闪动等问题。由于key值不会被及时的更新，在显示或者隐藏列时，部分DOM会被继续复用，不会重新渲染，导致列显示错乱。由于列的显示或者隐藏，导致了重排以及重绘，表格发生闪动。
el-table-column 使用v-if显示错乱问题
a72039的博客
02-01 3745
是 Vue.js 中用于跟踪每个节点的唯一性标识。在动态渲染的列表或表格中，当列表或表格的顺序改变时，Vue 将无法准确追踪每个节点的身份，从而导致性能下降和可能的渲染错误。开发项目时，发现el-table组件 el-table-column标签使用v-if判断，初次显示正常，第二次就会出现错乱问题。，Vue 可以确保每个列的唯一性，并在数据发生变化时正确地重新渲染。解决方法：在el-table-column标签上加 key值。
el-table 表格列实现动态显示与隐藏
最新发布
Leungsintin的博客
04-09 1108
当列项过多时，此组件可以自定义想要展示的列，并且能本地保存选择的列项列，如果觉得能帮到你的话，点个👍呗~
el-table使用v-if显示错乱问题
hua_ban_yu的博客
03-25 6027
el-table使用v-if显示错乱问题
el-table配合v-if导致数据错乱
简单随风的博客
01-20 1672
今天在使用vue + elementUI的el-table时，碰到一个很奇怪的bug：打印数据源正常，但是数据显示错误，一列不显示，一列显示重复 后面查了很多资料才知道el-table做了优化，可以复用列。解决方案是给table加上一个key标签，如下所示： <el-table :data="tableData" v-if="trackType === 1" key="0"> <el-table-column/> </el-table> <el-ta
el-table加上v-if顺序混乱问题解决
junhian的博客
08-05 2484
el-table加上v-if数据错乱解决思路
关于elemenui el-table表格（使用v-if）错乱的问题
qq_45952363的博客
09-25 659
每个表格列加上一个key='序号’属性就可以依次排序 在这里插入代码片 ```<el-table-column v-if="$router== 'query'">修改日期</el-table-column> 可以解决表格错乱问题 <el-table-column v-if="$router== 'query'" key='1'>修改日期</el-table-column> ...
element-ui el-tabs 和 el-table混合使用的问题
Bynine9的博客
01-18 1万+
最近在使用vue的element-ui前端框架中的el-tabs和el-table混合使用，发现了很多小问题。 1、问题一：el-tabs会使el-tab-pane 下面的数据一次性加载出来，导致数据更新不及时 刚开始写的代码时这样的，发现页面加载的时候，会把两个tab的页面的请求一次性加载出来。如果tab页面过多，会导致请求过多，造成页面卡顿，最重要的是页面数据实时变化的话不能及时获取到最新数据。 <el-tabs v-model="activeName" @tab-click="handl
el-table 使用v-if
07-27
- *1* *2* [element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题](https://blog.csdn.net/weixin_43968963/article/details/121767733)[target="_blank" data-report-click={"spm":"1018.2226.3001....
el-table合并表头，导出表头，数据错乱的问题
m0_51113907的博客
12-12 1132
表头合并，导出数据重复，导出表头错乱问题的解决
ElementUI 表格 el-table，在大量使用 v-if 时列表渲染出现错乱，要么 A 列的数据显示在 B 列上，要么后端有数据的但是显示的为空
snowflakelm的博客
06-14 1998
值，我一般习惯使用字段名，也可以随机生成一个值，只要具有唯一性就可以。作为唯一标识，这样渲染的时候就不会因为复用原则导致列数据混乱了。来控制显示隐藏时，就会出现列数据错乱的情况。当 el-table 表格上的列。
el-table使用v-if，或者标题排序错乱（vue2）
weixin_43677787的博客
03-13 492
el-table使用v-if，或者标题排序错乱（vue2）
Element-UI 的table使用v-if顺序会乱飞的问题
weixin_50488897的博客
10-19 968
table用v-if顺序乱掉
element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题
weixin_43968963的博客
12-07 3204
描述： 在el-table中使用v-if控制某些列的显示或者隐藏，当activeIndex数据发生改变时，下面这种写法会导致表格的列位置错乱，截图及代码如下： <el-table ref="multipleTable" :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize ) " tooltip-effect="dark" style="width: 100%" :row-key=" (row) =&g
el-tablecolumn : v-if列表顺序被打乱解决
qq_45061461的博客
07-04 1896
在table中难免需要控制显示的列,这就得用到v-if 了.但是添加了v-if 导致了列表中的列顺序被打乱掉,原本是需要操作在最后一列的,但是加了v-if 操作列就跑到前面去了.向需要往前排的列中绑定key ,key值是一个随机数.这样检测到不同的key值就会重新去加载排序。
解决 Element-ui中 表格（Table）使用 v-if 条件控制列显隐时数据展示错乱的问题
热门推荐
明天也要努力的博客
10-22 1万+
在 el-table-column 上需根据不同 v-if 条件来控制列显隐时，就会出现列数据展示错乱的情况（要么 A 列的数据显示在 B 列上，或者后端返回有数据的但是显示的为空），如下所示。，这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值，一般习惯使用字段名，也可随机生成一个值，只要具有唯一性就可以。
解决el-table多表格切换数据混乱
weixin_42504805的博客
07-01 3504
el-table多表格切换数据混乱
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值