el-table-column使用v-if导致位置错乱

最新推荐文章于 2024-07-22 12:29:37 发布
最新推荐文章于 2024-07-22 12:29:37 发布
阅读量1.6k 收藏 1
点赞数 2
分类专栏： Vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42527726/article/details/109743032
版权

在使用tab切换时，使用的是同一个表格组件，切换状态时要重新请求数据，然后要根据不同的状态展示不同的列，使用v-if做判断，在切换时，发现本该隐藏的列没有隐藏，而且位置还发生错乱了！

会错乱的写法：

<el-table-column v-if="isTab1">受理日期</el-table-column>
<el-table-column v-if="isTab2">生效日期</el-table-column>

解决方法：
每一列都添加一个具有唯一值的 key

<el-table-column v-if="isTab1" key="1">受理日期</el-table-column>
<el-table-column v-if="isTab2" key="2">生效日期</el-table-column>
濮家大少
关注
专栏目录
el-table-column 由于加了if判断 切换标签页时表头顺序不一致
墨茶Official 愿你在二次元有吃不完的草莓 饺子(ㄒoㄒ)
03-15 469
解决前 切换标签页后 表头顺序与原来的顺序不一致 解决后 解决办法 加 key <el-table-column v-if="currentView === '2'" :key="Math.random()" prop="companyName" label="单位" width="180"> </el-table-column> ...
element-ui el-tabs 和 el-table混合使用的问题
Bynine9的博客
01-18 9886
最近在使用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-column 使用v-if显示错乱问题
a72039的博客
02-01 2199
是 Vue.js 中用于跟踪每个节点的唯一性标识。在动态渲染的列表或表格中，当列表或表格的顺序改变时，Vue 将无法准确追踪每个节点的身份，从而导致性能下降和可能的渲染错误。开发项目时，发现el-table组件 el-table-column标签使用v-if判断，初次显示正常，第二次就会出现错乱问题。，Vue 可以确保每个列的唯一性，并在数据发生变化时正确地重新渲染。解决方法：在el-table-column标签上加 key值。
el-table列的显示与隐藏
最新发布
kunzedang_9528的博客
07-22 3295
首先 我部分字段有自定义的排序逻辑，和默认值或者 数据的计算 所以是不能简单的使用 v-for 循环column。然后 我需要默认展示一部分字段，并且 当表无数据时 提示不能 显示隐藏 字段。做一个类表单的设计，在提交的时候才做数据变更，并且添加搜索。
vue(element):el-table-column使用v-if列位置错乱问题
每天就学一点点的博客
07-08 4605
在解决问题之前首先需要知道什么是v-if v-if: 动态的向DOM树内添加或者删除DOM元素,切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件 v-show不能作用于column组件，所以不能使用。 接下来就要聊聊这个问题了，开始我以为是：data里的数据有误，可通过工具查看后发现数据无误，那么应该就是v-if这个属性了，它不同于v-show,v-show等同于style=“display:none;”,v-if是直接销毁再重建元素，我想应该是因为我多次调用这个属性导致了
element-ui中的el-table-column使用v-if导致列位置与数据错乱
一枚不断学习的小码农一枚~
06-05 8676
描述 根据需求，当某一项列数据时或者某属性时才显示此列，使用v-if进行显示隐藏后，发现会有随机列位置错乱与数据错乱现象。 原因 经查询资料发现， 这是因为在v-for或者v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况。而原本这些标签每一个都是独立的，于是需要添加key来做区分！ 表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，这就是问题所在，所以，通过key去标识一下当前行是唯一的，不许复用，就行了。 修
el-table-column列顺序错乱问题
weixin_41359197的博客
10-08 2132
el-table二次封装的自定义表格或者动态表格，常见列顺序错乱问题
el-table-column里内容错乱
12-20
el-table-column里内容错乱的问题可能是由于列位置和表头样式错乱导致的。解决这个问题的方法有两种： 1. 使用`:key`属性：在el-table-column标签中添加`:key`属性，并设置为一个随机数，例如`:key="Math.random()...
el-table fixed固定列导致错位的解决方案
热门推荐
青年码农
07-27 1万+
点击上方“青年码农”关注回复“特效源码”可获取各种资料Element UI table组件可以通过设置fixed属性实现列的固定，但是在某些情况下会导致固定列的样式错乱，下面就总结下解决样式错乱实现方案1.doLayout（官方提供）对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。2.<el-table>标签上...
el-table 使用v-if
07-27
- *3* [vue+element-ui中的el-table-column使用v-if导致位置错乱的现象](https://blog.csdn.net/zhgweb/article/details/127653200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm...
动态添加el-table列 和 多选表格默认选中
vq_qiqi的博客
04-26 694
动态添加el-table列父组件vertical子组件tableColChangecolChange.scss 父组件vertical <template> <div class="vertical"> <div class="tools"> <el-button icon="el-icon-s-tools" @click="colChange" class="settingIcon"></el-button> &l
el-table中el-table-column使用v-if导致fixed的列错位
zyynb的博客
06-07 729
当对el-table的某列v-if判断显示隐藏，会出现fixed固定列的内容错乱。
vue element-ui el-table-column配合v-if 数据位置错乱问题 el-table-column 和 fixed搭配使用出现的错乱
qq_41287158的博客
02-10 4159
问题：当我们对el-table的某一列进行判断显示隐藏时，就会出现列位置和表头样式错乱的问题 我们通常的写法（会错乱的写法） <el-table-column label="test" v-if="active !== '2'" > </el-table-column> 修正后的写法（不会错乱的写法） <el-table-column label="test" :key="Math.random()" v-if="active !== '2'" > </el-ta
关于elemenui el-table表格（使用v-if）错乱的问题
qq_45952363的博客
09-25 613
每个表格列加上一个key='序号’属性就可以依次排序 在这里插入代码片 ```<el-table-column v-if="$router== 'query'">修改日期</el-table-column> 可以解决表格错乱问题 <el-table-column v-if="$router== 'query'" key='1'>修改日期</el-table-column> ...
el-table-column数据列错位
Haines
09-16 1077
el-table-column数据列错位，element表格错位
vue+elementui项目中使用el-table在el-table-column上使用v-if的时候乱序和样式错乱的问题
qq_40055200的博客
04-12 579
v-show在表头上还不生效 项目中需要按照不同的媒体类型，展示不同的表头且数据字段也不同。可以增加不同key值解决v-if不生效问题。 <el-table-column label="数据状态" align="center" prop="bostate" :render-header="renderEmotionValue" width="120px" key="bostate"> <template slot-scope="scope">
elementUI v-if 导致 el-table 乱序的问题
qq_37330613的博客
11-26 573
使用elementUI时，v-if导致table乱序 table使用v-show不生效， 在使用 v-if 时加上 :key=“Math.random()” 以防止乱序 所有的列都加上 :key
el-tablecolumn : v-if列表顺序被打乱解决
qq_45061461的博客
07-04 1391
在table中难免需要控制显示的列,这就得用到v-if 了.但是添加了v-if 导致了列表中的列顺序被打乱掉,原本是需要操作在最后一列的,但是加了v-if 操作列就跑到前面去了.向需要往前排的列中绑定key ,key值是一个随机数.这样检测到不同的key值就会重新去加载排序。
在el-table-column的template中使用v-if来判断编辑标志位导致编辑输入框显示串行的问题
高电平的博客
05-01 2263
由于editScoreFlag是行内没有的属性，我在点击修改时强行加进去的，在$data中没有定义，在 v-if 判断时，由于 v-for 会生成多个相同的 元素，当点击修改时，editScoreFlag 的值会改变，但由于该值并没有保存到对应的表格展示数据 studentScoreList 中，所以所有表格中的元素都发生了变化。在项目中有一个需求是表格中有一列的数据可以点击修改，但是不能使用弹窗，需要在点击修改按钮时单元格内容变为输入框进行编辑，点击保存隐藏输入框，显示数据。这样就可以解决上述问题了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

濮家大少

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值