el-table-column 使用v-if显示错乱问题

于 2024-02-01 17:50:27 发布
阅读量1.7k 收藏
点赞数 4
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a72039/article/details/135979343
版权

在使用elementUI开发项目时，发现el-table组件 el-table-column标签使用v-if判断，初次显示正常，第二次就会出现错乱问题。

解决方法：在el-table-column标签上加 key值

   <el-table-column type="selection" width="55" align="center" 
        v-if="tabIndex == 'tab1'||(type==2 && tabIndex=='tab2')" key="1"/>

key 是 Vue.js 中用于跟踪每个节点的唯一性标识。在动态渲染的列表或表格中，当列表或表格的顺序改变时，Vue 将无法准确追踪每个节点的身份，从而导致性能下降和可能的渲染错误。通过为每个 el-table-column 提供一个唯一的 key，Vue 可以确保每个列的唯一性，并在数据发生变化时正确地重新渲染。

a72039
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table-infinite-scroll:El-Table无限滚动
05-26
查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-scroll全局引入import Vue from 'vue';import elTableInfiniteScroll ...
vue+element实现表格v-if判断
azrealtjtj2001的博客
09-18 5519
<el-table-columnprop="businessState"label="当前状态"width="250px"show-overflow-tooltipalign="center"> <templatescope="scope"> ...
解决 Element-ui中 表格（Table）使用 v-if 条件控制列显隐时数据展示错乱的问题
最新发布
明天也要努力的博客
10-22 7613
在 el-table-column 上需根据不同 v-if 条件来控制列显隐时，就会出现列数据展示错乱的情况（要么 A 列的数据显示在 B 列上，或者后端返回有数据的但是显示的为空），如下所示。，这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值，一般习惯使用字段名，也可随机生成一个值，只要具有唯一性就可以。
在el-table-column使用if的方法,以及出现表格错乱的解决办法
多看书少吃饭的博客
11-08 1436
在el-table-column使用if的方法,以及出现表格错乱的解决办法
el-table-column使用v-if 隐藏列 显示异常问题
菜鸟学编程
10-26 5928
因业务需求，需要在点击按钮时隐藏列。于是在 el-table-column 中 使用 v-if ，但是导致前一列显示异常的问题。解决方法：给使用了v-if的 【操作】列，加一个固定的key值，或循环渲染key即可。如： key="1" 或 : key="Math.random()"不显示 【操作】列时，【审核日期】列的值未能正常显示。
el-table-column标签内使用v-if判断其显示，出现列错位和列元素渲染异常的问题
KangMino的博客
03-14 1万+
问题描述： 根据侧边栏的选择条件，表格项有几项不同，我在el-table-column标签内使用了几个v-if渲染，结果出现列错位，并且该列元素渲染宽度和高度异常，该列元素通过props获取的值也未正确显示。 分析原因：vue的风格指南中介绍，默认情况下，Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会导致元素间相互影响，不能正常渲染。 总而言之就是v-if不能多次作用..
elementui中的el-table-column使用v-if后，出现了渲染的问题如何解决
m0_50441807的博客
05-26 3708
el-table-column使用v-if后，可能会出现位置错乱，或者绑定的字段和数据对应不上等问题，都是因为v-if后，渲染出现了问题导致的； 平常的写法是这样的： <el-table-column prop="date" label="姓名" v-if="isShow"></el-table-column> <el-table-column prop="date" label="年龄""></el-table-column> 而想要保证v-if生效却能正
在el-table-column的template中使用v-if来判断编辑标志位导致编辑输入框显示串行的问题
高电平的博客
05-01 2152
由于editScoreFlag是行内没有的属性，我在点击修改时强行加进去的，在$data中没有定义，在 v-if 判断时，由于 v-for 会生成多个相同的 元素，当点击修改时，editScoreFlag 的值会改变，但由于该值并没有保存到对应的表格展示数据 studentScoreList 中，所以所有表格中的元素都发生了变化。在项目中有一个需求是表格中有一列的数据可以点击修改，但是不能使用弹窗，需要在点击修改按钮时单元格内容变为输入框进行编辑，点击保存隐藏输入框，显示数据。这样就可以解决上述问题了。
vue element-ui el-table-column配合v-if 数据位置错乱问题 el-table-column 和 fixed搭配使用出现的错乱
qq_41287158的博客
02-10 4039
问题：当我们对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
改变el-table宽度
12-12
`:width`的值来自`tableColumn`对象，通过`tableColumn['tab-table-1'][索引]`获取，这里的`'tab-table-1'`是表格ID，索引对应于`el-table-column`在`tableColumn`数组中的位置。 在`mounted`生命周期钩子中，`...
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
<el-table-column v-for="(col, index) in columns" :key="index" :label="col.label" :prop="col.prop" :sortable="col.sortable" :show="col.show"></el-table-column> </el-table> <el-dialog title="选择列" ...
el-table-column循环生成时，在里面使用v-if问题
qq_34821290的博客
05-10 2301
el-table-column循环生成时，在里面使用v-if问题
vue(element):el-table-column使用v-if列位置错乱问题
每天就学一点点的博客
07-08 4477
在解决问题之前首先需要知道什么是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解决办法
josiecici的博客
03-23 4579
在最外面加上template标签来写循环 el-table-column上写v-if <template v-for="(value,key,index) in tableData[0].attributes"> <el-table-column v-if="key!='OBJECTID'&&key!='pro_id'&&key!='org_id'" :label="changeColumn(key)" :key="index" al
解决Element-UI 在table组件el-table-column中使用v-if的问题
热门推荐
lucasxt的博客
09-30 1万+
**场景：**切换页签时动态改变表格展示列以及对应数据项 **使用方式：**通过v-if条件判断控制显隐 **问题：**导致表头乱飞、错位，明明数据项有值，但是通过props获取值在页面上没有显示出来 **分析原因：**vue在渲染元素时，处于效率考虑， 会尽量地复用已有的元素而非重新渲染，导致元素间相互影响，不能正常渲染 解决方案： 用 key 管理可复用的元素 只需添加一个具有唯一值的 key attribute 表名“该元素是完全独立的，不要复用它” <el-table-column prop=
el-table-column用if判断改变顺序解决办法
weixin_51179995的博客
12-15 3111
原因: <el-table-column v-if="条件" label="列表需要改变的文字1" align="center" prop="本列参名" /> <el-table-column v-if="条件" label="列表需要改变的文字1" align="center" prop="本列参名" /> <el-table-column v-if="条件" label="列表需要改变的文字2" align="center" prop="本列参名" /> &.
el-table-column使用v-if
09-05
el-table-column组件可以使用v-if指令来根据条件动态显示或隐藏。v-if可以放在el-table-column组件的标签上，根据条件的真假来决定是否渲染该列。 例如，以下是一个示例，只有当变量showColumn为true时才会渲染该列： ```vue <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column v-if="showColumn" prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </template> <script> export default { data() { return { showColumn: true, // 控制是否显示该列 tableData: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '女' }, ], }; }, }; </script> ``` 在上述示例中，只有当showColumn为true时，才会渲染年龄列。当showColumn为false时，该列不会显示在表格中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值