解决el-tabs 切换tab时el-table高度缩短问题

最新推荐文章于 2024-05-29 14:59:22 发布
最新推荐文章于 2024-05-29 14:59:22 发布
阅读量514 收藏 11
点赞数 4
文章标签： vue.js 前端 css elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cabriella_/article/details/136710575
版权
本文主要讲述了如何通过在全局样式中应用flex布局，解决当el-tabs切换时el-table高度自动缩短的问题，确保表格在不同tab间平滑显示。
摘要由CSDN通过智能技术生成

解决el-tabs 切换tab时el-table高度缩短问题

添加全局样式

.el-table {
width: 100%;
display: flex;
flex-direction: column;
}
.el-table__body-wrapper {
flex: 1;
}
夏之小星星
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
本文将深入探讨如何解决在切换ElementUI的tab页后，`el_table`的固定列下方出现多余线条的问题，以及与之相关的固定列显示不全的场景。 首先，让我们分析问题的现象：在切换ElementUI的tab组件时，`el_table`的固定...
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
08-27
接下来，为了在页面切换时添加过渡效果，我们需要在`app.vue`文件中使用`<transition>`组件。`<transition>`是Vue内置的一个指令，它可以包裹单个或多个Vue组件，并在这些组件的插入、更新或删除时应用CSS过渡效果。...
el-table切换后表格高度改变
我的代码没有bug的博客
09-22 1801
产生原因：由于element-ui自身的bug 解决方法： 先固定表头高度，然后body_wrapper使用calc来减去表头高度 /deep/ .el-table__header-wrapper { height: 58px; } /deep/ .el-table__body-wrapper { height: calc(100% - 58px) !important; } ...
解决elenemtUi中使用el-tabs组件多个标签页切换el-table时，出现宽度压缩(缩小)的问题
qq_45404003的博客
07-28 3011
需要注意的是，doLayout() 方法只能在组件完全渲染后才能调用，否则可能会出现计算不准确的情况。解决方法就是使用el-table组件中的doLayout()方法是用来重新计算组件大小和位置的。当我们对组件进行动态修改后，可能会导致组件大小或者位置发生改变，此时可以调用 doLayout() 方法来重新计算并更新组件的布局。这样就会重新计算并更新表格的布局。
element el-table 设置行高 和表头高度
最新发布
小韩要快乐！
05-29 2001
第二种方式el-element-ui的方法。第一种方式 使用css。
解决el-table设置固定高度后，展示不同列时表格高度变小bug
DZQ1223的博客
04-03 1013
究其原因可知是el-table列动态发生变化后，el-table__body-wrapper的高度变小了。在更新表格数据后对el-table进行重载。
el-table中如果el-table-column加了v-if动态显示列导致位置错乱或者el-table__body-wrapper的高度小于容器高度的解决方案
qq_34452824的博客
08-06 1446
看过网上说的给使用了v-if的列，加一个固定的key值，试了一下没有作用。后来按F12的时候这个问题就自动解决了。于是就想到了在隐藏列显示后触发一下el-table的resize之类的方法应该就可以了。 在隐藏列显示之后，执行： this.$nextTick(() => { this.$refs.table.doLayout(); }); 万事大吉，搞定！记录一下，免得自己忘记。 ...
Elementui 表格页面切换后底部空白 el-table__body-wrapper is-scrolling-none 高度变窄
u010504924的专栏
10-09 930
第一步：先在标签内根据自身需要设定最大高度，我这里设定为270px。第二步：在样式中给el-table__empty-block样式类添加高度设置（特别说明，这里最好指明此样式类的上一级样式类，否则会运用到该页面所有el-table）
element-ui的el-table动态修改表格展示列，table高度变小问题
weixin_43915587的博客
04-08 4871
项目需求需要根据筛选项选择的不同，展示不同的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中使用el-tab-pane v-show/v-if无效的解决
10-15
然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是因为 `el-tab-pane` 的渲染机制导致的。 `v-show` 和 `v-if` 都是 Vue 中的条件渲染...
elementUI中的el-table的高度在被跳转返回后高度变小
Oliver尹的博客
07-16 2755
问题： 当通过v-show隐藏的el-table再度显示的时候，el-table中的内容的部分高度显示异常，比正常的小； 描述： 在一个组件中，有两个互斥的组件，一个是一张el-table实现的表格，表格中有一个详情按钮，另一个是详情按钮对应的页面，当点击表格中详情按钮后，表格组件隐藏，详情组件显示，之后再通过详情中的返回按钮，将表格显示，详情隐藏； 现在的问题是，如果表格组件使用的是v-if渲染的，那么table是一切正常的，如果使用的是v-show那么table显示的时候外框高度正常，表头正常，但是内部
el-table标签，head加body高度小于table高度
weixin_43744767的博客
05-17 432
如图，设置el-table高度，.el-table__body-wrapper加.el-table__body-wrapper的高度，自适应小于table的高度，会出现如下情况， 红框中为未填满部分，此时可在加载完数据后，使用 this.$nextTick(()=>{ this.$refs.productTable.doLayout() }) 重新计算table的自适应大小。 ...
tab切换时el-table，表格错位
蓝with黑的博客
03-20 437
方法，重新渲染table。
解决tab切换大小改变的 问题
steven.pf
10-16 1008
解决 tab切换带来的, 宽度变化问题 ,  哎呀 这代码写的看不懂啊 .....    function fixTab(){ $('#flowTab').on('tabsselect',function(){$(window).trigger('resize');}); }        ...
element tab切换 table 高度和宽度变化
qq_36364963的博客
03-25 6884
个人记录： tab切换 table 高度和宽度变化 原因：1. table的父级容器不能用flex布局，不然在切换的时候 宽度一直增减 2.tab 的切换是 display 的属性切换 解决办法： 1. 在 el-tab-pane 包含的子组件 用if来限制 2. 在父组件 tab切换的时候 调用 子组件 获取数据的 方法 // tab 切换 handleClick() { // 直接调用子组件初始化方法 避免 子组件 table 高度塌陷 有个bug 每次切换后
element中Tabs标签页切换echarts绘制宽高异常
Keep_Slience的博客
03-11 600
在vue项目的开发中用到了Tabs标签页，但是在这些标签页切换的过程中会出一个问题，就是在echarts容器的宽高设置成百分比的时候 ，echarts图表并不能够完整地撑满整个容器，而是一张压得很扁的一张图，导致出现这种问题的原因就是tab页在切换的过程中，他是通过 display:none 来实现tab页的显示隐藏，这样的话点击tab页的时候，下面的具体内容部分正处于display:none 这个状态，echarts在获取dom容器时，并不能够准确识别出dom的宽高，进而会出现图表被压扁的情况，解决办法
element-ui Table 高度缩小，切换页签时
qq_36425493的博客
11-29 655
在使用element-ui中的el-tabs组件进行切换时，出现tabs中的table高度、宽度变小，网上找的方案我觉得都不够完美，要么调用doLayout方法重新渲染，要么固定表头高度，使用起来有限制。
问题：vue2+elementui，tabs切换显示表格并设置表格选中行高亮失败
qq_44792224的博客
11-21 1289
好吧，最后发现问题出在setCurrentRow的参数上，不管你有没有改动表格数据，用你需要选中的行id，去遍历表格数据，遍历到item.id===id，则row =item,最后用this.$refs.table.setCurrentRow(row)可以解决。});console.log("有选中行", currentRow[0]);});这个nextTick因为写了就没去掉，不包可能也行吧。
缩短饿了么tabs 组件线条宽度
老电影故事的博客
07-15 1925
css样式很多，相互之间配合起来其实能完成很不错的效果，也能减少很多JavaScript代码。因为对样式理解少从而造成的JavsScript脚本增多是得不偿失的。这么多方式都能达到你觉得做不到的效果，以上只是用elementUI的tabs组件做的例子，其他插件只需要用同样的方法去做，也能达到效果，很多时候，多多考虑样式之间的配搭，能极大提高你代码的稳定与码代码的效率。好了，上面分享就这么多，希望能帮到你哦httpshttpshttpshttpshttpshttps。...
el-tabs文字竖着显示
09-01
要实现el-tabs文字竖着显示的效果，可以通过自定义CSS类来修改样式。首先，在el-tabs所在的父元素上添加一个自定义class，比如deleteBorder。 然后，在deleteBorder类下添加以下样式代码： ``` .deleteBorder .el-tabs__nav-wrap::after { height: 0; } .deleteBorder .el-tabs__active-bar { background: transparent; } ``` 这样就可以去掉el-tabs切换时的蓝色下划线和底部灰色线条。 另外，如果想要el-tabs的文字竖着显示，可以在el-tab-pane组件上加上一个样式属性，如下所示： ``` <el-tab-pane label="我的行程" class="verticalText"> 我的行程 </el-tab-pane> ``` 然后，在verticalText类下添加以下样式代码： ``` .verticalText { writing-mode: vertical-lr; white-space: nowrap; } ``` 这样就可以实现el-tabs的文字竖着显示的效果。注意，需要把label属性也添加到span标签的slot属性中。 需要注意的是，在使用el-tabs组件时，确保引入了正确的组件库和样式文件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [ElementUI Tabs标签页去除样式中的border 横向和竖向](https://blog.csdn.net/ka_xingl/article/details/110947227)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [el-table标头纵向显示](https://blog.csdn.net/JINGZzhuo/article/details/125851039)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值