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

最新推荐文章于 2025-04-09 16:08:29 发布
最新推荐文章于 2025-04-09 16:08:29 发布
阅读量2k 收藏 1
点赞数 2
文章标签： vue.js ui javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liqiannan8023/article/details/130723506
版权
文章讲述了在Vue.js使用ElementUI表格组件时，通过v-if进行列隐藏后出现列位置和数据错乱的原因，这主要是因为Vue的DOM复用机制。为了解决这个问题，文章建议给每个列添加独特的key值，以确保每一列在隐藏和显示时能正确识别和更新。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

问题描述

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

原因

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

解决

给列加key值

<el-table-column
 :key="1"
>
</el-table-column>
简单Janeee
关注
《Vue3笔记》第33节：Vue3项目中修改el-table表格的默认样式
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
04-21 97
前一个小节的内容中，已经介绍了项目如何基于封装图表组件。这个小节来学习一下，如何修改表格组件的默认样式。Vue3项目开发（微信文章集合）修改之后的表格样式效果，如下所示：修改表格样式，例如：字体颜色、背景颜色、边框等等，只需要添加下面代码即可： 修改表格行的样式，例如：背景颜色、边框、字体大小，颜色等等，只需要添加下面代码： 修改表格的偶数行的背景颜色、当前选中行显示的背景颜色，只需要添加下面代码： 修改表格多选框的样式，添加下面代码： 1.3、完整代码 调整完的表格组件完整代码，如下所示： 1.4、获取源
【专题】（vue+element-ui）动态设置tabel列的显示与隐藏
热门推荐
鲁宽宽的博客
08-30 5万+
不得不说，百度很强大，只要搜索饿了么怎么动态设置列会得到很多答案； 1、v-show(不生效)：v-show直接绑定,得到的结果很意外，哈哈，不起作用，饿了么对v-show不感冒； 2、v-if()：此方法确实可以控制显示与隐藏；不过分情况使用： &gt;&gt;a:  element组件 el-table-column &lt;el-table-column v-if="colDa...
解决 Element-ui中 表格（Table）使用 v-if 条件控制列显隐时数据展示错乱的问题
明天也要努力的博客
10-22 1万+
在 el-table-column 上需根据不同 v-if 条件来控制列显隐时，就会出现列数据展示错乱的情况（要么 A 列的数据显示在 B 列上，或者后端返回有数据的但是显示的为空），如下所示。，这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值，一般习惯使用字段名，也可随机生成一个值，只要具有唯一性就可以。
el-table 表格列实现动态显示与隐藏
最新发布
Leungsintin的博客
04-09 1180
当列项过多时，此组件可以自定义想要展示的列，并且能本地保存选择的列项列，如果觉得能帮到你的话，点个👍呗~
Element el-table 表格列 v-if 显示 隐藏 样式错乱的问题
weixin_50912789的博客
10-21 2140
Element el-table 表格列 v-if 显示 隐藏 样式错乱的问题
table-column显隐列出现错位
hhuangjinfeng的博客
12-01 1010
解决方案：将固定宽度width改为最小宽度min-width，min-width会把剩余宽度按比例分配给设置了 min-width的列。当table-column列数较少时，其宽度会自适应。原因：剩余的table-column的宽度之和不足以撑满整个列表的宽度，会进行居中。而表头依然从左向右排列，因此导致表头和内容出现错位。问题：使用Table表格，并设置table-column的固定宽度。对其中多项列进行隐藏，出现错位效果。环境：vue3、Element-plus。
el-tablecolumn : v-if列表顺序被打乱解决
qq_45061461的博客
07-04 1899
在table中难免需要控制显示的列,这就得用到v-if 了.但是添加了v-if 导致了列表中的列顺序被打乱掉,原本是需要操作在最后一列的,但是加了v-if 操作列就跑到前面去了.向需要往前排的列中绑定key ,key值是一个随机数.这样检测到不同的key值就会重新去加载排序。
element-ui 中的table的列隐藏问题解决
10-18
总的来说，处理 Element-UI table 列隐藏问题需要掌握 v-if 和 v-show 指令的使用区别，以及对表格宽度设置、内容省略和提示展示的正确配置方法。通过以上知识，我们可以更加高效和优雅地解决 Element-UI 中 table ...
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
element-ui table 实现客户端自定义列的显示隐藏
qq_36291747的博客
12-16 6180
文章目录前言一、最终实现的效果图二、实现步骤1. 列设置数据定义2. 本地数据存取方法封装2. 给表格添加右键出现的菜单3. 列设置数据与表格列进行关联4. 其它问题1. 列由隐藏，设置为显示后，表格抖动、样式错乱？总结 前言 提示：功能实现过了好久了，突然想起来一直没做个总结。好记性不如烂笔头，gogogo! 使用 element-ui 的 <el-table> 来显示系统中各种各样的数据，感觉美滋滋啊，方便又美丽。直到那天，来了个需求：给表格添加上数据列自定义显示/隐藏的功能。开始研究文档
Vue3使用element-ui的table表格错位
weixin_43871703的博客
03-09 1287
vue3使用element Plus 的table表格在搜索错位 <el-table ref="tableRef"></el-table> JS部分 const tableRef = ref(null);// 这里是在<el-table>上定义的ref，vue3需要用ref变成响应式数据 //打印里面的结构可以用 console.log(tableRef.value),一直往下找会有doLayout方法; //重新渲染的函数 const reRender =
el-table-column使用v-if 隐藏列 显示异常问题
菜鸟学编程
10-26 6259
因业务需求，需要在点击按钮时隐藏列。于是在 el-table-column 中 使用 v-if ，但是导致前一列显示异常的问题。解决方法：给使用了v-if的 【操作】列，加一个固定的key值，或循环渲染key即可。如： key="1" 或 : key="Math.random()"不显示 【操作】列时，【审核日期】列的值未能正常显示。
ElementUI 组件的 Table 自定义表头，控制列的显示或隐藏
无解的菜鸟晖 的博客
10-05 1万+
​1、从 Element 官方文档（链接：Element - The world's most popular Vue UI framework）的 Table 组件，可以看到 Element 支持采用插槽的形式自定义表头。 所以表格中列的表头不仅仅只有个标题，可以另外自定义一个按钮来控制操作。 2、表格中每一列是否显示或者隐藏，可以用一个变量来存放列的状态（colShow），那上一条说的自定义按钮触发事件就是来改变这列的状态。 3、页面上列的显示或者隐藏，可以用 Vue 指令 v-if 来控制
控制el-table的列显示隐藏
qq_71214810的博客
01-08 3771
在我们的页面中el-table-column是固定的，因为现在是对现有的进行维护和迭代更新。 对需要控制列显示隐藏的页面进行控制。
vue中控制element表格列的显示与隐藏
夏天的博客
07-06 2341
vue中控制element表格列的显示与隐藏
解决Element-UI 在table组件el-table-column中使用v-if的问题
lucasxt的博客
09-30 1万+
**场景：**切换页签时动态改变表格展示列以及对应数据项 **使用方式：**通过v-if条件判断控制显隐 **问题：**导致表头乱飞、错位，明明数据项有值，但是通过props获取值在页面上没有显示出来 **分析原因：**vue在渲染元素时，处于效率考虑， 会尽量地复用已有的元素而非重新渲染，导致元素间相互影响，不能正常渲染 解决方案： 用 key 管理可复用的元素 只需添加一个具有唯一值的 key attribute 表名“该元素是完全独立的，不要复用它” <el-table-column prop=
element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题
weixin_45744454的博客
04-11 9167
描述： 在el-table中使用v-if控制某些列的显示或者隐藏，当activeIndex数据发生改变时，下面这种写法会导致表格的列位置错乱，使用v-show没效果，截图及代码如下： <el-table ref="multipleTable" :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize ) " tooltip-effect="dark" style="width: 100%" :row-key
vue(element):el-table-column使用v-if列位置错乱问题
每天就学一点点的博客
07-08 5072
在解决问题之前首先需要知道什么是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隐藏列表格错乱 v-show隐藏列失效问题
weixin_42574985的博客
05-16 1271
在想要实现el-table-column的某一列显示或隐藏 是根据接口返回的数据是否存在时。直接使用v-if来判断数据是否存在可能会导致表格数据错乱，使用v-show又无法做到隐藏操作。在 el-table-column上加入key值 再使用v-if就可以实现。
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....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值