vue—el-table通过v-if渲染列表显隐，排列混乱处理

已于 2023-03-31 17:08:40 修改
阅读量1.1k 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-08-01 22:59:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42462468/article/details/126111808
版权
在Vue中使用v-if渲染列表时，可能会遇到渲染顺序与数据顺序不符的问题。解决方法是在每个`el-table-column`上添加`key`属性，并确保key值按顺序从1开始，这有助于Vue正确识别和更新元素。
摘要由CSDN通过智能技术生成

问题

在通过v-if渲染列表页，可是会出现明明按照顺序但是渲染出来排序不对。

解决

其实很简单，只需要在每个el-table-column上加上key就行。

key值按照顺序从1开始在这里插入图片描述

迷路小灰灰
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
总之，理解并熟练掌握Vue的`v-for`指令以及如何与ElementUI的`el-table`组件配合，是构建灵活可扩展的表格的关键。通过动态生成列，可以极大地提高代码的可维护性和复用性。希望这篇文章能对你在开发过程中有所帮助...
使用element-ui的table组件使用v-if导致列乱序
AzeShinja的博客
08-04 365
如果在对应的column上不加独一的key值使用v-if会导致每次渲染顺序不同 所以一定要在column上加上key值！！！
ElementUI 表格 el-table，在大量使用 v-if 时列表渲染出现错乱，要么 A 列的数据显示在 B 列上，要么后端有数据的但是显示的为空
snowflakelm的博客
06-14 1793
值，我一般习惯使用字段名，也可以随机生成一个值，只要具有唯一性就可以。作为唯一标识，这样渲染的时候就不会因为复用原则导致列数据混乱了。来控制显示隐藏时，就会出现列数据错乱的情况。当 el-table 表格上的列。
07_el-table 拖动改变列的展示顺序 _ 前端实现
最新发布
做打不死的小强
07-03 592
el-table 拖拽列实现用户自定义排序
vue+vxe-table中的vxe-table-column配合v-if导致列样式与位置错乱
wwf1225的博客
01-10 2012
咨询工具咨询工具咨询工具
Element-UI 的table使用v-if顺序会乱飞的问题
weixin_50488897的博客
10-19 786
table用v-if顺序乱掉
el-table加上v-if顺序混乱问题解决
junhian的博客
08-05 2294
el-table加上v-if数据错乱解决思路
el-tablecolumn : v-if列表顺序被打乱解决
qq_45061461的博客
07-04 1369
在table中难免需要控制显示的列,这就得用到v-if 了.但是添加了v-if 导致了列表中的列顺序被打乱掉,原本是需要操作在最后一列的,但是加了v-if 操作列就跑到前面去了.向需要往前排的列中绑定key ,key值是一个随机数.这样检测到不同的key值就会重新去加载排序。
vue el-table实现行内编辑功能
10-15
在Vue.js中，Element UI库提供了丰富的UI组件，其中`el-table`是用于展示表格数据的一个强大组件。本文将详细讲解如何在Vue项目中利用Element UI的`el-table`实现行内编辑功能。 首先，我们需要在`el-table`的表头...
vue el-table实现自定义表头
10-15
综上所述，通过Scoped Slot结合el-table和el-table-column组件，可以灵活地为Vue应用中的Element UI表格实现各种自定义表头需求。这样不仅可以提供更好的用户体验，还可以满足复杂业务逻辑的实现。需要注意的是，...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
`v-show` 和 `v-if` 都是 Vue 中的条件渲染指令，它们的主要区别在于渲染策略：`v-if` 会根据条件决定是否编译元素，而 `v-show` 则始终编译元素，只是通过改变 CSS 的 `display` 属性来控制显示与隐藏。然而，当...
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
Vue.js作为一款流行的前端框架，提供了丰富的组件库，如Element UI，它包含了一个名为`el-table`的数据表格组件。本篇文章将深入探讨如何在Vue.js项目中结合`el-table`和`file-saver`库，实现前端导出分页数据到...
elementui的table组件，大量使用v-if导致列表渲染错乱，有的列渲染的值不对，有的列渲染出来的空值解决办法
04-11 1931
先说一下，之所以是同事那边碰到的而我这边碰不到这个问题，是因为我这边做。，其实这个问题解决起来也超级简单，平铺出来的也加上。这是同事碰上的，感觉挺奇怪的就研究了研究。这是平铺出来的，从这里可以看到到处都是。遍历出来的，vue 开发的都知道，即可，可以自己排列，也可以直接。关键词就好啦，只需要给。方式，碰不到这种问题都…，他这里是平铺出来的。
Vue table显示v-if、v-else-if 多层判断写法
热门推荐
浮萍的博客
07-27 2万+
<el-table-column prop="versionStatus" label="标准状态"> <template slot-scope="scope"> <p v-if="scope.row.versionStatus=='1'">
element封装表格组件el-table-column列顺序错乱
UUID、
11-01 4116
1、父组件给子组件传递对象，子组件使用 ：style="[customStyle]" 绑定，达到父组件随意修改子组件的目的。 2、判断文件后缀是否允许 // 允许上传的图片后缀 limitType:{ type: Array, default() { return ['png', 'jpg', 'jpeg', 'webp', 'gif']; } }, checkFileExt(file) { // 检查是否在允许的后缀中 let noArrowExt = false; // 获取后缀名 le
el-table-column使用v-if 隐藏列 显示异常问题
菜鸟学编程
10-26 6009
因业务需求，需要在点击按钮时隐藏列。于是在 el-table-column 中 使用 v-if ，但是导致前一列显示异常的问题。解决方法：给使用了v-if的 【操作】列，加一个固定的key值，或循环渲染key即可。如： key="1" 或 : key="Math.random()"不显示 【操作】列时，【审核日期】列的值未能正常显示。
elementUI 表格循环生成列导致表头顺序错位
AillenRen的博客
06-15 2178
用elementUI比较多了。但这个坑是第一次遇到。 以前都是将列直接写在template里的固定报表，但是在遇到表头需要动态变化，且属于层级不定的复合表头时，会出现，本来写在前面的列会跑到后面去，跟数据的顺序不一致的问题。 如下为封装的动态迭代生成树形复合表头的组件 看起来是没问题，但是表格生成后，第一列的序号列会错位到最后一列去。网上没有找到一个遇到同样的问题（-_-||）。 排查后发现问题出在 外面的 上，只要在外部嵌套任何一个标签，就会导致渲染后的表头列顺序出现问题。 但是如大家所见，不可能只有
element-ui table 列渲染错乱
weixin_55510188的博客
04-23 538
当table表格通过v-if配置是否显示列，且列的数量过多时（大概10列以上），就会出现渲染混乱。(例如：页面组件是缓存的keep-alive，首次渲染表格没问题。但是切换到其他组件再切换回来时，表格列就会出现错乱。通过v-if控制表格的列是否展示，每列通过showColumn函数检查用户的配置，返回true或false（是否显示该列）。每一列添加唯一key属性值，问题解决。
解决 Element-ui中 表格（Table）使用 v-if 条件控制列显隐时数据展示错乱的问题
明天也要努力的博客
10-22 8549
在 el-table-column 上需根据不同 v-if 条件来控制列显隐时，就会出现列数据展示错乱的情况（要么 A 列的数据显示在 B 列上，或者后端返回有数据的但是显示的为空），如下所示。，这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值，一般习惯使用字段名，也可随机生成一个值，只要具有唯一性就可以。
vue el-table列显隐
10-25
Vue的el-table列显隐可以通过设置el-table-column的属性来实现。具体方法如下： 1. 在el-table-column中添加v-if或v-show指令，根据需要显示或隐藏列。 2. 在el-table-column中添加prop属性，指定该列对应的数据字段。 3. 在el-table中添加:column-chooser属性，开启列选择器功能。 4. 在el-table中添加@visible-change事件，监听列选择器的显示状态变化。 5. 在@visible-change事件中，通过this.$refs.table.columns获取所有列的信息，根据需要显示或隐藏列。 例如，如果要隐藏姓名列，可以在el-table-column中添加v-if指令，并在el-table中添加:column-chooser和@visible-change事件，代码如下： <el-table ref="table" :data="tableData" :column-chooser="true" @visible-change="handleVisibleChange"> <el-table-column label="姓名" prop="name" v-if="showNameColumn" /> <el-table-column label="年龄" prop="age" /> <el-table-column label="性别" prop="gender" /> </el-table> 在methods中添加handleVisibleChange方法，代码如下： methods: { handleVisibleChange(visibleColumns) { this.showNameColumn = visibleColumns.some(column => column.property === 'name'); } } 这样，当用户在列选择器中取消勾选姓名列时，该列就会被隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值