控制 el-table 多列显示隐藏造成内容错乱

最新推荐文章于 2025-06-04 14:38:54 发布
最新推荐文章于 2025-06-04 14:38:54 发布
阅读量4.7k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34319049/article/details/93487953
博客先提及el-table中el-popover显示问题，重点介绍el-table多列显隐问题。当el-table与el-tabs一起使用，各tab内容项不同，如待审核tab无需显示操作列且要加两列，用v-if会使表格内容错乱，解决办法是给每列加唯一key。

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

刚刚介绍了el-table 中 el-popover 的显示问题，现在介绍一下el-table里的多列显隐问题。
很多时候我们会把el-table 和 el-tabs 放在一起使用，但是每栏 tab 里的内容项不是都一样，
例如：
在这里插入图片描述
在tab为待审核的时候，我不需要显示操作列，但是需要在加两列，但是如果只用v-if 会造成表格内容错乱。
解决办法：

<el-table-column :key="Math.random()" :style=" "></el-table-column>

或者

<el-table-column :key="Math.random()" v-if=" "></el-table-column>

就是给每列加一个唯一的key，就可以防止错乱

Vue中el-table追加行后固定列滚动错位问题
qq_39753413的博客
07-12 3467
Vue中el-table追加行后固定列滚动错位问题 偶然发现一个问题，但是并没有找到解决方案，自己调试了两个多小时终于解决。先贴出问题业务描述：在已查询完全部的符合条件的数据后，表格最下方提示“没有更多数据” 使用solt = “append” 追加div 这时候滑动到最底部，固定列错位了。......
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 el-table 展示多列重复数据
qq_20494353的博客
03-03 3601
项目中显示表格，内容只有两列数据，所以当数据很多的时候，可以重复3遍这两列数据，显示在页面上。如下图所示： 姓名 成绩 姓名 成绩 姓名 成绩 张三 60 李四 70 王五 80 小明 66 小红 67 小美 90 小王 88 使用vue + element UI js代码 export default { data() { return { tableData:[ {name:'张三',poi
element的el-table的列显示隐藏导致表格列显示错位
最新发布
o.0
06-04 405
摘要 在使用Element UI的el-table实现列显示/隐藏功能时，遇到列错位或显示不全的问题。初始状态正常，但操作列隐藏后出现布局异常。分析认为可能是表格未重新渲染导致。解决方案是通过v-if强制重新渲染表格：1) 监听columns变化调用getNewColumns；2) 在列变化后执行reloadTable方法，利用$nextTick短暂销毁并重建表格组件。该方法有效解决了列错位问题，使表格能正确响应列显示状态的变化。关键代码包括列过滤逻辑和表格的重建机制。
Element Table齿轮实现列字段显示与隐藏渲染异常（行列错乱）的解决方案
高大志leo的博客
11-03 845
在做一个齿轮控制element table的列字段显示与隐藏时（使用v-if控制），表格渲染异常（行列错乱）的解决方案： 为el-table加上 :key="Date.now()" 或者 :key="Math.radom()" 即可解决。 其他相似问题：在初始化table的时候，有时会从接口api拿到数据之后进行处理，每次循环都将数据push到表格数组，如 this.tableData.push()，此时el-table的数据源:data="tableData"，有可能会导致表格渲染异常（行列错乱或者.
el-table使用type=“expand“、fixed表中表内容显示错位
hua_ban_yu的博客
06-23 3906
在使用elementUI的表格时，发现同时使用type="expand"表中表和fiexd列锁定这两个功能时，表中表部分内容会直接显示在最外层表格上面，拖动表格滚动条时也无法隐藏。如图 查了很多资料，网上说的this.$refs.planTableRef.doLayout()无法解决问题，为了解决这个问题，最终想到一个比较合理的解决方案......
table-column显隐列出现错位
hhuangjinfeng的博客
12-01 1042
解决方案：将固定宽度width改为最小宽度min-width，min-width会把剩余宽度按比例分配给设置了 min-width的列。当table-column列数较少时，其宽度会自适应。原因：剩余的table-column的宽度之和不足以撑满整个列表的宽度，会进行居中。而表头依然从左向右排列，因此导致表头和内容出现错位。问题：使用Table表格，并设置table-column的固定宽度。对其中多项列进行隐藏，出现错位效果。环境：vue3、Element-plus。
element-ui 中的table的列隐藏问题解决
10-18
需要注意的是，当你有多个列需要根据条件显示或隐藏时，应该考虑将这些列包裹在一个容器元素内，并使用 v-if 来控制整个容器的显示和隐藏。这样做可以避免在切换时出现的布局混乱问题。 总的来说，处理 Element-UI ...
el-table动态列的列数变多时行会错乱
11-08
el-table动态列的列数变多时行会错乱可能是由于el-table组件的默认布局方式引起的。el-table组件默认使用fixed布局，当列数变多时，列的宽度会自适应变窄，如果列的宽度变得太小，就会导致行的错乱。解决这个问题的...
el-table-column隐藏 显示
02-06
### 实现 Element UI `el-table-column` 组件的显示和隐藏 为了实现 `el-table-column` 的显示和隐藏，在 Vue.js 中应使用 `v-if` 而不是 `v-show`，因为 `el-table-column` 不支持 `v-show` 指令[^2]。 下面是一...
Vue里使用Element UI的Tabs時el-tab-pane的隱藏和顯示
热门推荐
losedguest的博客
04-26 3万+
1.效果圖 隱藏相關項后 <el-tabs v-model="selectTab" ref="tabs" type="border-card" tab-position="top" @tab-click="handleTabClick"> <el-tab-pane name="0" :label="$t('main.vie...
Element-ui表格的列隐藏显示会使表格头数据错乱或者表格头样式变大
梦想成为全栈的切图仔
09-26 8435
在使用Element-ui 框架的时候，相信过多的人会遇到一系列不属于技术范围的问题，甚至都没见到过，其实这类问题解决起来也是很好解决的。 只需要用心再看一遍框架就好。 今天就来给大家说一说使用element框架的时候，表格头为什么会错乱或者变大。 &lt;el-table-column v-if="TheCustomColumn1 == false &amp;&amp; CustomColumn......
解决el-table 动态显隐列的文字错位问题
树上骑个猴的博客
09-23 1896
初始状态 过滤掉"地址"列以后，发生了文字错位 原因： 使用了el-table-column的min-width和show-overflow-tooltip，当动态增删列的时候导致宽度计算错误。解决方案，去除min-width的宽度，可以给width赋值固定宽度。 如果还存在位移问题可以使用以下的解决方案： 1.对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 this.$nextTick(() => { this.$re
vue el-tab-pane 下使用div v-if 隐藏dom标签
Tianxuan_kong的博客
04-16 1741
【代码】vue el-tab-pane 下使用div v-if 隐藏dom标签。
el-table type=”expand”行展开图标的动态显示与隐藏
菜同学的博客
02-23 2541
当前 行类名中控制展开的类名 ：动态生成表格 行类名。
el-table数据不显示_显示器有拖影重影解决办法
weixin_39777875的博客
11-28 1793
摘要无论是以前的CRT显示器，还是现在的液晶显示器，都有可能会出现拖影重影的问题，其主要产生的原因几乎都是接触不良，也有可能是主板、显卡或显示器本色问题而导致，我们可以通过下面的方法来排查原因，并针对解决显示器有拖影，是指显示屏幕上的显示内容不清晰，在后面会拖着一条尾巴阴影，尤其以文字的拖影最为明显。而且显示器的拖影重影一般都是自左向右的阴影，如下图所示显示器有拖影重影无论是以前的CRT显示器，还...
element-ui显示和隐藏某个tab标签
肖肖肖丽珠的博客
08-17 4618
<el-tabs v-model="activeName" ref="tabs"> <el-tab-pane label="基本信息1" name="first" > 基本信息</el-tab-pane> <el-tab-pane label="基本信息2" name="second" > 基本信息</el-tab-pane> <el...
element ui中table动态列切换时，样式错位问题
qq_41580802的博客
03-16 3366
v-show起作用的本质是利用display:none控制隐藏，el-table-column的td是利用了display: table-cell 控制显示，而display：table-cell的优先级又高于display：none，所以v-show失效了。监视属性发生改变或者数据加载完，触发beforeUpdate生命周期函数，使得列的key发生改变（因为全都是随机数，全部发生改变），key发生改变表格重新渲染表格，可以解决问题二中加随机数造成的表格抖动的问题。2、如果用v-show请切换成v-if；
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值