el-table-column使用v-if时出现的高度错误问题

最新推荐文章于 2024-01-20 18:39:05 发布
最新推荐文章于 2024-01-20 18:39:05 发布
阅读量578 收藏
点赞数 2
分类专栏： vue 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W_H_M_S/article/details/121784859
版权
本文探讨了在Vue项目中遇到的el-table-column组件结合v-if指令使用时导致表格高度计算错误的问题。通过调用this.$refs.tableRef.doLayout()方法在$nextTick中解决布局更新延迟，确保了表格动态显示隐藏列时的高度正确性。
摘要由CSDN通过智能技术生成

el-table-column使用v-if时出现的高度错误问题


在调用改变v-if的方法位置调用该方法 

this.$nextTick(() => {
	this.$refs.dicttableTree.doLayout();
});
W_H_M_S
关注
专栏目录
el-table-column嵌html,vue+elemenUI实现el-table-column行的上下移动
weixin_28933335的博客
06-19 1043
最带道术用量确示常构端析以要效开的用，近不后实现的效果，如图所示，第一行的向上按钮不可操作，最后一行的向下按钮为不可操作要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标。其啥一发框的做器就文过按述近都头基架关好屏实 vue的很多操作并不是对页面数据的操作，而是对数据源的操作，数据源发生变化，实时渲染页面，这样就达到了，我们的需求支器事的后功发久这含层请间业在屏有随...
el-table-column使用v-for展示数据，＜template #defalut=“scope“＞不生效
weixin_45563717的博客
08-12 6356
el-table-column使用v-for展示数据，针对展示需要处理的数据使用平常的不生效该如何解决
el-table中如果el-table-column加了v-if动态显示列导致位置错乱或者el-table__body-wrapper的高度小于容器高度的解决方案
qq_34452824的博客
08-06 1463
看过网上说的给使用了v-if的列，加一个固定的key值，试了一下没有作用。后来按F12的时候这个问题就自动解决了。于是就想到了在隐藏列显示后触发一下el-table的resize之类的方法应该就可以了。 在隐藏列显示之后，执行： this.$nextTick(() => { this.$refs.table.doLayout(); }); 万事大吉，搞定！记录一下，免得自己忘记。 ...
element-UI使用v-if隐藏列引起table高度变小的问题
最新发布
Wang_zhe_的博客
01-20 632
element-UI使用v-if隐藏列引起table高度变小的问题
element ui el-table动态生成表头(v-for/v-if)导致的高度塌陷（少一截）的解决办法
kanggege00的博客
04-19 1315
element ui el-table动态生成表头导致的高度塌陷（少一截）的解决办法
el-table动态显示列高度塌陷问题以及非固定列底部滚动条无法对齐的问题
karlif的博客
07-28 1874
el-table动态显示列高度塌陷问题以及非固定列底部滚动条无法对齐的问题
element ui组件切换table组件高度发生变化
panameras的博客
06-14 930
element ui组件切换table组件高度发生变化 项目需求是两个表格在一个组件当中，用v-if判断显示哪个table，高度是计算出来的，但是切换两个table的时候，第二个table高度莫名其妙少了100px，下面原理不说了，只说解决办法 用table组件自带的方法可以解决， table下有个doLayout的方法 当切换到第二个table的时候，就调用这个方法 this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{
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="选择列" ...
element UI的el-table-column获取index
热门推荐
p_pppxxxxmmm的博客
10-16 2万+
我们是的后台管理系统是用的vue 框架和element ui开发的，其中有一个表格页面，点击表格行数拿到index进行操作，需求是点击‘对此发奖’按钮，拿到当前行对应的基金代码名称这些，所有需要拿到index ， 页面代码如下： <template> <div class="addmain"> <div class="addForm"> ...
el-table中el-table-column下的操作切换class样式
周家大小姐
07-29 1251
需求用操作按钮太多;设计这边想如果按钮大于3个就把它放在更多中;再点击就隐藏,如果当前row为展开又点其它row的更多;就把这个展开的关闭箭头恢复成向左显示。el-table结合el-popover弹出框。
element-ui的el-table动态修改表格展示列，table高度变小问题
weixin_43915587的博客
04-08 5061
项目需求需要根据筛选项选择的不同，展示不同的table列 当切换搜索筛选项，进行table查询时，出现问题： el-table列动态发生变化后，el-table__body-wrapper的高度变小了 el-table__body-wrapper的高度是动态设置的，在网上查的结果对el-table添加css： .table-fixed { /deep/.el-table__body-wrapper { height: calc(100% - 44px) !important; } }
Vue 在使用v-if的前提下，使用elementResizeDetector配合ref获取元素块的高度
wuyxinu的博客
07-18 938
前言 公司的项目主要以Vue + elementUI为主，最近公司项目需要做一个附件上传的组件，如下图，然而在做的过程中，遇到了一定的问题。在缩小浏览器时，备注部分与附件查看处的滚动条重合了，这就使得滚动条无法使用。 在这个情况下，我就想到，对备注部分的元素块note进行监听。因为缩小浏览器窗口，会使得note部分的width减少（设置为自动占比100%）,而在内容不变的情况下，势必会使该元素块的高度height增加。于是我就使用了elementResizeDetector对DOM进行监听。 核心代码
vue v-if 显示后元素自适应高度
kan_Feng的博客
10-09 1508
vue v-if 隐藏元素后显示，需要重新激活元素，才能设置元素自适应高度
ElementUi table 在显示或隐藏列时，表格抖动且表格高度变化
CSDN_920227的博客
05-25 1042
解决方法： 就是增加一个key，在每次显示或隐藏列时时key值发生变化，重新加载绘制表格时就不会有影响。 例如： <el-table ref="multipleTable" :data="data" :height="height" border highlight-current-row :v-loading="true" :key="keyIndex" 在显示影藏列的方法中添加 this.keyIndex++ ...
ElementUI 里，防止表格在新增减少列的时候出现表格跳动和高度变化
sinat_38020023的博客
11-13 905
就是有个功能，指标配置，点了之后，显示或不显示表格某个列 一般有变化后，表格就会重新绘制数据表，如果不加处理，可能会出现高度变化。如果固定了某一列的话，还会出现表格跳动（固定的那列错位）。 解决办法： 加一个key，只要每次增减列的时候key值有变化，重绘表格的时候就不会影响到整体布局了 步骤： step 1 固定高度 /deep/ .el-table { .el-table__body{ height: 99.9%!important; .
vue element-ui el-table-column配合v-if 数据位置错乱问题 el-table-column 和 fixed搭配使用出现的错乱
weixin_45832746的博客
02-24 845
el-table-column 列加了fixed="right"操作后，从源码上来看，加入fixed之后这个列的高度是动态计算的，页面加了缓存，再次切换回来就会导致高度没有计算padding值所有会出现高度错乱的问题。// 覆盖el-table__fixed-right 和 el-table__fixed的css 样式 （我这里是左右两边都固定了，根据实际情况处理即可）el-table-column 和 fixed搭配使用出现的错乱的解决办法，在数据渲染完后使用官方提供的doLayout方法。
解决element tab栏样式错乱的两个方法，1 加key，2 每次渲染调用api(doLayout)
Polaris_best的博客
10-08 759
解决element tab栏样式错乱的两个方法，1 加key，2 每次渲染调用api(doLayout)
element table 表头使用v-if，tab切换和分页切换时出现闪动
weixin_42340514的博客
08-19 1542
element table 控制表头显示隐藏只能使用v-if，v-show没效果 使用v-if的时候切换时表头数据可能会下掉，出现闪动，分页切换的时候也会出现这个问题 beforeUpdate() { this.$nextTick(() => { //在数据加载完，重新渲染表格 this.$refs["table"].doLayout(); }); }, 表格内容错乱问题 <el-table-column :key="Math.r.
element：el-table 表格高度错位
奶绿走糖的博客
04-19 3009
1. 通过watch来监听`tableColumn`有无改变（即有无被隐藏或显示） 2. 使用`await this.$nextTick()`，目的是等dom更新 3. 再调用element给出的`doLayout()`方法来重新布局table，使之按原来的样子显示出来。
el-table-column使用v-if
09-05
el-table-column组件可以使用v-if指令来根据条件动态显示或隐藏。v-if可以放在el-table-column组件的标签上，根据条件的真假来决定是否渲染该列。 例如，以下是一个示例，只有当变量showColumn为true时才会渲染该列...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值