el-table使用v-if显示错乱问题

已于 2022-03-28 09:38:16 修改
阅读量5.6k 收藏 11
点赞数 11
分类专栏： vue 文章标签： el-table显示错乱 elementUI表格显示错乱 el-table v-if错乱
于 2022-03-25 10:57:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hua_ban_yu/article/details/123730072
版权

在使用elementUI开发项目时，发现el-table组件使用v-if判断，初次显示正常，第二次就会出现错乱问题。

1. 在el-table-column标签上添加v-if，点击按钮显示隐藏列，发现含有输入框的这一列正常显示。

2. 再点击按钮隐藏最后一列后，再点击按钮就会看到，含有输入框的这一些显示错乱。

 

解决方案：

在每一个el-table-column标签上添加 key值即可解决问题

hua_ban_yu
关注
  • 11
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
el-table-infinite-scroll:El-Table无限滚动
05-26
查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-scroll全局引入import Vue from 'vue';import elTableInfiniteScroll ...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是因为 `el-tab-pane` 的渲染机制导致的。 `v-show` 和 `v-if` 都是 Vue 中的条件渲染...
element ui 中el-table中使用v-if造成组件复用问题---之---el-table 中使用el-popover 无法弹出问题
MISS_zhang_0110的博客
06-06 1555
表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，所以，通过column-key去标识一下当前行是唯一的，不许复用就行了。本人猜测是：v-if会导致updated生命周期执行，会覆盖上面的v-if的生命周期，导致上次的生命周期后的逻辑触发不了但是是错误的，不管是v-if还是v-show生命周期是一样的。在v-for或者v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况。
el-table加上v-if顺序混乱问题解决
junhian的博客
08-05 2214
el-table加上v-if数据错乱解决思路
vue+element实现表格v-if判断
最新发布
weixin_42678822的博客
05-03 504
【代码】vue+element实现表格v-if判断。
vue(element):el-table-column使用v-if列位置错乱问题
每天就学一点点的博客
07-08 4472
在解决问题之前首先需要知道什么是v-if v-if: 动态的向DOM树内添加或者删除DOM元素,切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件 v-show不能作用于column组件，所以不能使用。 接下来就要聊聊这个问题了，开始我以为是：data里的数据有误，可通过工具查看后发现数据无误，那么应该就是v-if这个属性了，它不同于v-show,v-show等同于style=“display:none;”,v-if是直接销毁再重建元素，我想应该是因为我多次调用这个属性导致了
el-table-column 使用v-if显示错乱问题
a72039的博客
02-01 1709
是 Vue.js 中用于跟踪每个节点的唯一性标识。在动态渲染的列表或表格中，当列表或表格的顺序改变时，Vue 将无法准确追踪每个节点的身份，从而导致性能下降和可能的渲染错误。开发项目时，发现el-table组件 el-table-column标签使用v-if判断，初次显示正常，第二次就会出现错乱问题。，Vue 可以确保每个列的唯一性，并在数据发生变化时正确地重新渲染。解决方法：在el-table-column标签上加 key值。
elementui的table组件，大量使用v-if导致列表渲染错乱，有的列渲染的值不对，有的列渲染出来的空值解决办法
04-11 1835
先说一下，之所以是同事那边碰到的而我这边碰不到这个问题，是因为我这边做。，其实这个问题解决起来也超级简单，平铺出来的也加上。这是同事碰上的，感觉挺奇怪的就研究了研究。这是平铺出来的，从这里可以看到到处都是。遍历出来的，vue 开发的都知道，即可，可以自己排列，也可以直接。关键词就好啦，只需要给。方式，碰不到这种问题都…，他这里是平铺出来的。
el-table-column循环生成时，在里面使用v-if问题
qq_34821290的博客
05-10 2296
el-table-column循环生成时，在里面使用v-if问题
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
同时，确保在`el-table`中使用`v-if`指令来决定列是否渲染。 至于**列排序**，在`el-table`中，可以使用`sortable`属性来指定列是否可排序，而`sort-method`则用于自定义排序逻辑。默认情况下，`el-table`支持对...
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
vue el-table实现行内编辑功能
10-15
<el-button size="mini" type="danger" round plain v-if="!scope.row.isSet" @click="handleDelete(scope.$index, scope.row)">{{ $t('common.delete') }}</el-button> ``` 在`methods`中定义`handleDelete`方法：...
element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题
weixin_43968963的博客
12-07 3029
描述： 在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-table-column用if判断改变顺序解决办法
weixin_51179995的博客
12-15 3107
原因: <el-table-column v-if="条件" label="列表需要改变的文字1" align="center" prop="本列参名" /> <el-table-column v-if="条件" label="列表需要改变的文字1" align="center" prop="本列参名" /> <el-table-column v-if="条件" label="列表需要改变的文字2" align="center" prop="本列参名" /> &.
elementui 之el-table通过v-if 控制按钮显示与隐藏表头错位问题
qq_44716001的博客
08-08 411
el-table-column label="选择方式" :key="Math.random()" prop="selectStyle" />给每一列加 :key="Math.random()"
【vue】element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题
前端代码小白的日常博客
06-25 1701
表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，这就是问题所在，所以，通过key去标识一下当前行是唯一的，不许复用，列唯一，就可以解决。根据需求，当某一项列数据根据某属性等显示隐藏该列，使用v-if进行隐藏后，发现会有随机列位置错乱与数据错乱现象。这是因为在v-for或者v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现。而原本这些标签每一个都是独立的，于是需要添加key来做区分！
el-table-column v-if隐藏列表格错乱 v-show隐藏列失效问题
weixin_42574985的博客
05-16 969
在想要实现el-table-column的某一列显示或隐藏 是根据接口返回的数据是否存在时。直接使用v-if来判断数据是否存在可能会导致表格数据错乱，使用v-show又无法做到隐藏操作。在 el-table-column上加入key值 再使用v-if就可以实现。
vue+element-ui中的el-table-column配合v-if导致列样式与位置错乱的现象
热门推荐
tian_xuewu的博客
07-25 3万+
对el-table的某一列进行判断显隐时，经常会出现列的位置错乱和表头的样式变化的问题的处理
el-tabs如何切换组件，动态切换
ZZZZZZZZjy的博客
12-06 2086
v-if用于根据条件判断是否渲染指定的元素或组件，里的条件是"activeName === item.name"，即当组件的name属性值与当前激活的标签页名称(activeName)相同时，才渲染该组件。而v-bind(:)用于动态绑定属性值，这里的属性是"is"，它指定了要渲染的组件类型，即item.components，表示渲染当前标签页对应的组件。
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....
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值