Vue Element 动态显示隐藏表格的列乱序问题

已于 2023-02-21 16:34:37 修改
阅读量722 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript ecmascript
于 2022-09-13 09:35:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42475906/article/details/126827130
版权

在el-table-column上使用v-show绑定是无效果的
将v-show改为v-if之后进过几次切换显示/隐藏后，发现表格的排版完全乱

在这里插入图片描述

 解决方案：给每一个el-table-column标签上都加一个key="index"

在这里插入图片描述
在这里插入图片描述

卜是我的错
关注
专栏目录
vue——动态控制表格列的显示和隐藏
景严-的博客
08-19 3万+
如图，为要实现的需求，即右键table的表头弹出菜单栏，通过勾选多选框的内容来控制表格列的显示和隐藏。 1. HTML部分（elemen-ui）： <el-table :data="list" border fit @header-contextmenu="contextmenu"> <el-table-column v-if="colData[0].istrue" l...
Vue+Element表格动态列+表格分页
-
08-23 3718
效果如图： 代码： 引用JQuery，Vue，Element等文件，换成自己的路径 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- JQuery --> <script type="text/javascript" sr...
table-column显隐列出现错位
最新发布
hhuangjinfeng的博客
12-01 869
解决方案：将固定宽度width改为最小宽度min-width，min-width会把剩余宽度按比例分配给设置了 min-width的列。当table-column列数较少时，其宽度会自适应。原因：剩余的table-column的宽度之和不足以撑满整个列表的宽度，会进行居中。而表头依然从左向右排列，因此导致表头和内容出现错位。问题：使用Table表格，并设置table-column的固定宽度。对其中多项列进行隐藏，出现错位效果。环境：vue3、Element-plus。
【vue】element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题
前端代码小白的日常博客
06-25 1884
表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，这就是问题所在，所以，通过key去标识一下当前行是唯一的，不许复用，列唯一，就可以解决。根据需求，当某一项列数据根据某属性等显示隐藏该列，使用v-if进行隐藏后，发现会有随机列位置错乱与数据错乱现象。这是因为在v-for或者v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现。而原本这些标签每一个都是独立的，于是需要添加key来做区分！
Element Table齿轮实现列字段显示与隐藏渲染异常（行列错乱）的解决方案
高大志leo的博客
11-03 753
在做一个齿轮控制element table的列字段显示与隐藏时（使用v-if控制），表格渲染异常（行列错乱）的解决方案： 为el-table加上 :key="Date.now()" 或者 :key="Math.radom()" 即可解决。 其他相似问题：在初始化table的时候，有时会从接口api拿到数据之后进行处理，每次循环都将数据push到表格数组，如 this.tableData.push()，此时el-table的数据源:data="tableData"，有可能会导致表格渲染异常（行列错乱或者.
解决vxe-table切换显示隐藏的时候表格样式错乱问题
前端你鹏哥的博客
06-29 1052
此时我们只需要在切换表格的方法里触发一下表格的refreshData()方法即可解决此问题。
在vue项目中使用v-show控制元素隐藏导致swiper的轮播图及分页无法正常显示
浮生离梦的博客
12-31 2844
一、需求问题 在之前的项目开发中，使用了swiper插件。由于是vue项目，对于swiper的轮播图我们使用了v-show命令，进行动态隐藏与显示。只有当点击进行一些操作以后，swiper的轮播图才会显示出来。但是，在使用v-show命令以后，swiper的轮播图显示和分页不正常，样式出现问题，无法正常显示。 二、需求分析 在swiper的配置中，我们一开始进行配置了pagination和pagi...
vue element实现表格合并行数据
01-18
本文实例为大家分享了vue element实现表格合并行数据的具体代码，供大家参考，具体内容如下 支持不分页的表格数据，分页的表格数据还有小bug xss=removed span-method=objectSpanMethod> 序号 prop=id ...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
12-29
先看看ElementUI里关于el-table的template数据结构： xss=removed> label=日期 width=180> label=姓名 width=180> <el-table-
vue element 中的table动态渲染实现（动态表头）
12-13
通过在vue中使用element的table表格，实现数据动态渲染，并且动态渲染表头。通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.table...
解决 Element-ui中 表格（Table）使用 v-if 条件控制列显隐时数据展示错乱的问题
明天也要努力的博客
10-22 9436
在 el-table-column 上需根据不同 v-if 条件来控制列显隐时，就会出现列数据展示错乱的情况（要么 A 列的数据显示在 B 列上，或者后端返回有数据的但是显示的为空），如下所示。，这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值，一般习惯使用字段名，也可随机生成一个值，只要具有唯一性就可以。
AVUE实现动态实时隐藏列，并渲染
qq_60349857的博客
10-16 779
this.columnApi.setColumnVisible('prop名', false) 隐藏。this.columnApi.setColumnVisible('prop名', true)显示。
Element-ui表格的列隐藏显示会使表格头数据错乱或者表格头样式变大
梦想成为全栈的切图仔
09-26 8316
在使用Element-ui 框架的时候，相信过多的人会遇到一系列不属于技术范围的问题，甚至都没见到过，其实这类问题解决起来也是很好解决的。 只需要用心再看一遍框架就好。 今天就来给大家说一说使用element框架的时候，表格头为什么会错乱或者变大。 &lt;el-table-column v-if="TheCustomColumn1 == false &amp;&amp; CustomColumn......
Element el-table 表格列 v-if 显示 隐藏 样式错乱的问题
weixin_50912789的博客
10-21 2046
Element el-table 表格列 v-if 显示 隐藏 样式错乱的问题
el-form动态表单切换显示/隐藏导致的校验报错
monkey7
12-27 2317
el-form 的el-select change事件 控制el-card里包裹的 el-tab-pane 表单 显示/隐藏
el-table-column v-if隐藏列表格错乱 v-show隐藏列失效问题
weixin_42574985的博客
05-16 1122
在想要实现el-table-column的某一列显示或隐藏 是根据接口返回的数据是否存在时。直接使用v-if来判断数据是否存在可能会导致表格数据错乱，使用v-show又无法做到隐藏操作。在 el-table-column上加入key值 再使用v-if就可以实现。
avue实现动态显隐，动态控制
热门推荐
leaders_forerver的专栏
09-11 1万+
需求： 一个select选择框，选择数据变化，控制其他输入框的显隐，是否可输入控制 avue 实现 动态控制 显隐，可操作性，实现方案： 1.change事件 2.watch 侦听器 display 主要注意属性display 为true 展示 为false 隐藏 { display:false, search:true, ...
element ui 动态控制列显隐导致出现表格列错乱的问题
yyy2567338788的博客
03-10 1477
问题描述：一个页面中有三个tab，前两个tab表格列一致，第三个tab表格列和前面两个不完全相同，要多出几列。比如在第三个tab也的table第一列加入一个可展开行的列，在切换tab时，发现表格列错乱 解决方法：首先通过v-if控制显隐，然后给每个table-column添加key，这样就完美解决了 <el-table-column key="1" prop="goodsName" label="商品名称" width="200" align="center" show-overflow-too
使用v-if来让table的列或者按钮是否隐藏与显示，列排列顺序变动。
weixin_45069396的博客
10-14 445
使用v-if来让table的列或者按钮是否隐藏与显示，列排列顺序变动。
Vue + Element实现动态表格筛选与列控制
资源摘要信息:"在使用Vue.js框架结合Element UI库构建Web应用时，经常会遇到需要对表格数据进行筛选以及动态展示或隐藏表格列的场景。本文将详细介绍如何实现这些功能。 首先，我们要了解Vue.js框架的基本原理，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值