【vue】element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题

最新推荐文章于 2024-01-09 10:13:17 发布
最新推荐文章于 2024-01-09 10:13:17 发布
阅读量1.4k 收藏 1
点赞数 2
文章标签： vue.js ui javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liqiannan8023/article/details/130723506
版权

文章目录

问题描述

根据需求，当某一项列数据根据某属性等显示隐藏该列，使用v-if进行隐藏后，发现会有随机列位置错乱与数据错乱现象

原因

这是因为在v-for或者v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况。
而原本这些标签每一个都是独立的，于是需要添加key来做区分！
表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，这就是问题所在，所以，通过key去标识一下当前行是唯一的，不许复用，列唯一，就可以解决

解决

给列加key值

<el-table-column
 :key="1"
>
</el-table-column>
简单Janeee
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决 Element-ui中 表格（Table）使用 v-if 条件控制列显隐时数据展示错乱的问题
明天也要努力的博客
10-22 5857
在 el-table-column 上需根据不同 v-if 条件来控制列显隐时，就会出现列数据展示错乱的情况（要么 A 列的数据显示在 B 列上，或者后端返回有数据的但是显示的为空），如下所示。，这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值，一般习惯使用字段名，也可随机生成一个值，只要具有唯一性就可以。
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
主要介绍了使用element-ui +Vue 解决 table 里包含表单验证的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue Element 动态显示隐藏表格的列乱序问题
weixin_42475906的博客
09-13 606
将v-show改为v-if之后进过几次切换显示/隐藏后，发现表格的排版完全乱。
vue(element):el-table-column使用v-if列位置错乱问题
每天就学一点点的博客
07-08 4210
在解决问题之前首先需要知道什么是v-if v-if: 动态的向DOM树内添加或者删除DOM元素,切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件 v-show不能作用于column组件，所以不能使用。 接下来就要聊聊这个问题了，开始我以为是：data里的数据有误，可通过工具查看后发现数据无误，那么应该就是v-if这个属性了，它不同于v-show,v-show等同于style=“display:none;”,v-if是直接销毁再重建元素，我想应该是因为我多次调用这个属性导致了
element el-table 表格列 v-if 显示 隐藏 乱序问题
tangyuhui
10-30 1万+
有个需求 当tab为投保人时，表格中显示字段为投保人相关信息 当tab为被保人时，表格中显示字段为被保人相关信息 我在来回切换tab时，发现用v-if控制的字段列经常乱序。字段展示先后顺序不一。 如图所示： 解决方法：在table-column中加入:key=“Math.random()” 如下所示代码 &lt;el-table-column ...
el-table加上v-if顺序混乱问题解决
junhian的博客
08-05 2013
el-table加上v-if数据错乱解决思路
el-table控制列的显示与隐藏
weixin_42375707的博客
06-24 1万+
el-table控制列的显示与隐藏
Vue table显示v-if、v-else-if 多层判断写法
热门推荐
浮萍的博客
07-27 2万+
&lt;el-table-column prop="versionStatus" label="标准状态"&gt; &lt;template slot-scope="scope"&gt; &lt;p v-if="scope.row.versionStatus=='1'"&gt;
el-table 列的动态显示与隐藏
一起加油吧~
12-23 1万+
当我们在对表格数据查看的时候，可能某些列的数据是当前想要重点关注的，而某些列并不需要展示出来，我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。
vue element ui table表格--实现列的显示与隐藏
最新发布
王二的博客
01-09 3442
vue element ui table表格 -- 实现列的显示与隐藏
VUE表格显示错位的两种解决思路
m0_58874148的博客
03-14 2421
两种思路解决vue表格显示错乱问题
vue element-ui中table合计指定列求和实例
01-18
注意点： 1. 中 加:summary-method=”getSummaries” 2. 中要加 prop // 房间号的合计去掉 getSummaries (param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { if (index === 0) { sums[index] = '总计' } else if (index === 5 || index === 6) {
vue element-ui el-date-picker限制选择时间为当天之前的代码
10-16
主要介绍了vue element-ui el-date-picker如何限制选择时间为当天之前,文中给大家提供了代码段和截图，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
10-17
主要介绍了Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Element el-table 表格列 v-if 显示 隐藏 样式错乱的问题
weixin_50912789的博客
10-21 1828
Element el-table 表格列 v-if 显示 隐藏 样式错乱的问题
Element-ui表格的列隐藏显示会使表格头数据错乱或者表格头样式变大
梦想成为全栈的切图仔
09-26 8150
在使用Element-ui 框架的时候，相信过多的人会遇到一系列不属于技术范围的问题，甚至都没见到过，其实这类问题解决起来也是很好解决的。 只需要用心再看一遍框架就好。 今天就来给大家说一说使用element框架的时候，表格头为什么会错乱或者变大。 &lt;el-table-column v-if="TheCustomColumn1 == false &amp;&amp; CustomColumn......
通过v-if动态设置Element表格列时，出现表格列显示错乱、表头闪动等问题
你的阿迁
06-14 2204
在生命周期函数beforeUpdate中调用表格的 doLayout() 方法 （尽量加上可选链，不然可能存在获取不到table实例，造成doLayout为undefined的情况）在实际开发， 我们经常会通过v-if控制表格列的显隐，来实现不同条件下展示不同的表格列，这时候就可能会出现表格列显示错乱、以及表头闪动等问题。由于key值不会被及时的更新，在显示或者隐藏列时，部分DOM会被继续复用，不会重新渲染，导致列显示错乱。由于列的显示或者隐藏，导致了重排以及重绘，表格发生闪动。
vue使用el-table在el-table-column下使用v-if改变数据不响应
LQS5858的博客
03-16 2780
vue使用el-table在el-table-column下使用v-if改变数据不响应 代码: <el-table :data="propertyList" class="hoo-clear-table" height="100%" ref="tableRef" style="width: 100%"> <el-table-column align="l
vue element-ui不显示table
07-28
对于vue element-ui的table组件不显示的问题，可能有几种可能的原因。以下是一些常见的解决方法： 1. 检查是否正确引入了element-ui的table组件。请确保在您的代码中正确导入了element-ui，并且已经按照官方文档的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值