解决Element-UI 在table组件el-table-column中使用v-if的问题

最新推荐文章于 2024-07-22 12:29:37 发布
最新推荐文章于 2024-07-22 12:29:37 发布
阅读量1.7w 收藏 16
点赞数 6
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucasxt/article/details/108881315
版权

场景： 切换页签时动态改变表格展示列以及对应数据项
使用方式： 通过v-if条件判断控制显隐
问题： 导致表头乱飞、错位，明明数据项有值，但是通过props获取值在页面上没有显示出来
分析原因： vue在渲染元素时，处于效率考虑， 会尽量地复用已有的元素而非重新渲染，导致元素间相互影响，不能正常渲染
解决方案：
用 key 管理可复用的元素
只需添加一个具有唯一值的 key attribute 表名“该元素是完全独立的，不要复用它”

<el-table-column prop="name" label="姓名" key="name" > </el-table-column>
lucasxt
关注
  • 6
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
【专题】（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组件如何使用render属性的实现
01-19
在使用 element-ui table组件时，由于表列比较多一个个写特别麻烦，所以想通过将所有表头定义成一个数组，通过遍历多方式去实现。这样解决了手写很多 el-table-column 的情况。 障碍： 类似于下面自定义表列的样式，...
vue+element实现表格v-if判断
azrealtjtj2001的博客
09-18 5548
<el-table-columnprop="businessState"label="当前状态"width="250px"show-overflow-tooltipalign="center"> <templatescope="scope"> ...
el-table列的显示与隐藏
最新发布
kunzedang_9528的博客
07-22 2753
首先 我部分字段有自定义的排序逻辑，和默认值或者 数据的计算 所以是不能简单的使用 v-for 循环column。然后 我需要默认展示一部分字段，并且 当表无数据时 提示不能 显示隐藏 字段。做一个类表单的设计，在提交的时候才做数据变更，并且添加搜索。
el-table-column标签内使用v-if判断其显示，出现列错位和列元素渲染异常的问题
热门推荐
KangMino的博客
03-14 1万+
问题描述： 根据侧边栏的选择条件，表格项有几项不同，我在el-table-column标签内使用了几个v-if渲染，结果出现列错位，并且该列元素渲染宽度和高度异常，该列元素通过props获取的值也未正确显示。 分析原因：vue的风格指南中介绍，默认情况下，Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会导致元素间相互影响，不能正常渲染。 总而言之就是v-if不能多次作用..
el-table-column使用v-if 隐藏列 显示异常问题
菜鸟学编程
10-26 5995
因业务需求，需要在点击按钮时隐藏列。于是在 el-table-column 中 使用 v-if ，但是导致前一列显示异常的问题。解决方法：给使用了v-if的 【操作】列，加一个固定的key值，或循环渲染key即可。如： key="1" 或 : key="Math.random()"不显示 【操作】列时，【审核日期】列的值未能正常显示。
在el-table-column的template中使用v-if来判断编辑标志位导致编辑输入框显示串行的问题
高电平的博客
05-01 2204
由于editScoreFlag是行内没有的属性，我在点击修改时强行加进去的，在$data中没有定义，在 v-if 判断时，由于 v-for 会生成多个相同的 元素，当点击修改时，editScoreFlag 的值会改变，但由于该值并没有保存到对应的表格展示数据 studentScoreList 中，所以所有表格中的元素都发生了变化。在项目中有一个需求是表格中有一列的数据可以点击修改，但是不能使用弹窗，需要在点击修改按钮时单元格内容变为输入框进行编辑，点击保存隐藏输入框，显示数据。这样就可以解决上述问题了。
vue(element):el-table-column使用v-if列位置错乱问题
每天就学一点点的博客
07-08 4554
在解决问题之前首先需要知道什么是v-if v-if: 动态的向DOM树内添加或者删除DOM元素,切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件 v-show不能作用于column组件，所以不能使用。 接下来就要聊聊这个问题了，开始我以为是：data里的数据有误，可通过工具查看后发现数据无误，那么应该就是v-if这个属性了，它不同于v-show,v-show等同于style=“display:none;”,v-if是直接销毁再重建元素，我想应该是因为我多次调用这个属性导致了
详解使用element-ui table组件的筛选功能的一个小坑
10-17
3. 如果在模板中使用了条件判断，如`v-if`和`v-else`，记得在`filter-method`中对应处理这些逻辑。 正确地处理这些问题后，自定义模板和筛选功能就能协同工作，为用户提供更丰富的表格交互体验。在开发过程中，遇到...
element-ui 中的table的列隐藏问题解决
10-18
总的来说，处理 Element-UI table 列隐藏问题需要掌握 v-if 和 v-show 指令的使用区别，以及对表格宽度设置、内容省略和提示展示的正确配置方法。通过以上知识，我们可以更加高效和优雅地解决 Element-UI 中 table ...
element-ui组件table实现自定义筛选功能的示例代码
10-17
在本文中，我们将深入探讨如何使用element-ui组件库中的table组件实现一个自定义的筛选功能。element-ui是一个流行的Vue组件库，它提供了各种各样的UI组件，以帮助开发者快速构建高质量的Web界面。其中，table组件是...
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
10-16
在介绍Vue Element-UI Table组件的动态生成表头和数据、修改单元格格式以及父子组件通信的过程中，涉及到了Vue框架的诸多核心知识点。以下将详细解释这些知识点。 首先，Vue是一种构建用户界面的渐进式框架。它的...
vue使用el-table在el-table-column下使用v-if改变数据不响应
LQS5858的博客
03-16 3106
vue使用el-table在el-table-column下使用v-if改变数据不响应 代码: <el-table :data="propertyList" class="hoo-clear-table" height="100%" ref="tableRef" style="width: 100%"> <el-table-column align="l
Vue使用el-table-column 状态码转文字显示 v-if
weixin_46709007的博客
09-22 2424
Vue使用el-table-column 状态码转文字显示 v-if
el-table-column循环生成时，在里面使用v-if问题
qq_34821290的博客
05-10 2329
el-table-column循环生成时，在里面使用v-if问题
el-table-column 循环加 v-if解决办法
josiecici的博客
03-23 4606
在最外面加上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
el-table-column v-if隐藏列表格错乱 v-show隐藏列失效问题
weixin_42574985的博客
05-16 1013
在想要实现el-table-column的某一列显示或隐藏 是根据接口返回的数据是否存在时。直接使用v-if来判断数据是否存在可能会导致表格数据错乱，使用v-show又无法做到隐藏操作。在 el-table-column上加入key值 再使用v-if就可以实现。
el-table-column 使用v-if显示错乱问题
a72039的博客
02-01 2056
是 Vue.js 中用于跟踪每个节点的唯一性标识。在动态渲染的列表或表格中，当列表或表格的顺序改变时，Vue 将无法准确追踪每个节点的身份，从而导致性能下降和可能的渲染错误。开发项目时，发现el-table组件 el-table-column标签使用v-if判断，初次显示正常，第二次就会出现错乱问题。，Vue 可以确保每个列的唯一性，并在数据发生变化时正确地重新渲染。解决方法：在el-table-column标签上加 key值。
vue element-ui el-table-column配合v-if 数据位置错乱问题 el-table-column 和 fixed搭配使用出现的错乱
qq_41287158的博客
02-10 4113
问题：当我们对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
element-ui中table组件固定高度
05-24
要在element-ui的table组件中固定高度，可以使用`height`属性来设置表格的高度。例如： ```html <el-table :data="tableData" height="300"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> ``` 在上面的示例中，将表格的高度设置为了300px。这将使表格的内容在超出高度时出现滚动条。 如果你想要固定表头和表尾，并且只滚动表格内容，可以添加`max-height`属性，并设置`height`为`100%`。例如： ```html <el-table :data="tableData" height="100%" max-height="300"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> ``` 在上面的示例中，表格的最大高度为300px，并且表头和表尾将固定在表格的顶部和底部。如果表格内容超出了高度，将会出现滚动条。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值