解决flex布局下， elementui table组件不能跟随父组件的宽度而变化的bug

最新推荐文章于 2023-08-11 14:30:14 发布
最新推荐文章于 2023-08-11 14:30:14 发布
阅读量863 收藏 1
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wjyz/p/10710561.html
版权

 

 

 

 bug： 我在flex布局的元素中使用了elementui的table组件，饿了么的table上会被加一个动态的宽度， 当第一次改变flex元素宽度的时候。table的动态宽度会变化，第二次和以后就不会变化了。

 

解决方法：  给使用flex的元素加上 overflow-x：hidden

转载于:https://www.cnblogs.com/wjyz/p/10710561.html

anchu7971
关注
ElementUI el-table 在flex下的宽度自适应问题
qq_19694913的博客
07-21 1万+
BUG：在flex容器下面的一个flex:1的子容器里面写了个el-table用来展示列表数据，在做宽度自适应测试的时候发现该组件的宽度只会增加不会缩小。 Debug：通过控制台发现组件生成的table的宽度是动态计算的，翻查源码，发现以下代码段 // table.vue if (this.fit) { addResizeListener(this.$el, this.resizeLi...
element UI中flex布局下el-table宽度自适应在IE下出现一直加载宽度的bug解决
u013994400的博客
03-01 633
element-ui 表格列会动态持续增加
el-table在flex布局下宽度不能自适应的解决方法
qq_34631220的博客
01-11 1426
el-table在flex布局下宽度不能自适应的解决方法
element-ui中el-table根据浏览器的缩放自适应表头宽度和内容展示
最新发布
qq_38803953的博客
08-11 3448
etable 设置了heigh或者max-height之后在最开始的界面可以正常滑动看到内容，但是f12或者第一次缩放屏慕的时候他内容最底部不会全部展示有一部分会被遮住，后面在e-table-column添加了fixed="right”虽然解决内容的问题，但是一样f12或者第一次屏幕的时候他的标题head就出问题了如果文字过长，高度不能适应内容会被遮住、继续施拉屏幕宽度的时候前面两个都恢复正常了。2.css设置这个给他强行设置自适应就可以第一次修改屏幕宽度的时候达到内容自适应了。
css flex下element table 宽度无法自适应
明明的博客
06-15 1086
element el-table table 解决在flex下宽度不会自适应问题
【FlexBox】display : flex 布局下，父元素宽度不能自适应子元素宽度
InkingWT的博客
09-23 5001
最近闲来无事准备写个后台管理的前端模板，顺便拿 FlexBox 练手。 一、概述： <div class="menu-box"> <ul class="menu-group"> <li class="menu-item"> ... </li> <li class="menu-item"> ... </li> <li class="menu-item"> ... &
antd的carousel走马灯组件在flex布局下会出现无限宽度的BUG
FarmerLZJ的专栏
10-24 1296
原文地址：https://www.qianduan.shop/blogs/detail/12 # antd的carousel走马灯组件在flex布局下会出现无限宽度的BUG ## 问题复现 开发环境： win10 + React17 + umi3 + antd v4.16 任意层次的父级节点的布局设置为flex布局，carousel组件就会出现无限宽度的问题。 测试代码如下： ``` <div style={{ display: "flex" }}> <Carousel a.
页面使用弹性布局，使用elementUI的Table高度等于父盒子的100%时候，table出现上缩动画
weixin_45397914的博客
10-17 1074
    最近工作中有一个页面布局使用弹性布局，高度限定屏幕高度，使用elementUI的table时，因为想要他的高度等于其父盒子的高度的，所以table使用了height=100%;但是这是会发现其页面第一次出现，table的高度会出现一个向上缩的动画。要消除这种动画效果,通过查阅资料，这样的原因是因为高度height的100%没有绝对定义其相对元素是哪个，就会出现逐层向上寻找。要消除这种动画，在样式中使用position来决定其相对谁的高度。 eg: div{
vue el-table 表格宽度无法缩小自适应
u013992330的博客
01-26 5172
element 内部的table宽度是根据父级元素来计算的。当父元素是flex布局时，嵌套的子元素会有一个是固定的宽度。 在浏览器拉升的过程中，父元素首先被拉升，因此嵌套的子元素也可以跟着拉升，但是当浏览器缩小时，由于父元素被子元素撑着，无法缩小，而子元素在父元素没有缩小的情况下也不会缩小，这就出现了父、子元素相互依赖的情况，从而导致table无法随着浏览器的缩小而自动缩小。 解决办法： 给table的父元素设定相对定位，给table设定绝对定位，例...
vxe-table表格自适应高度的实现方法
草率小猿的博客
07-20 1万+
常用的管理系统里，常常涉及到表格自适应父组件高度，以方便用户操作。本文讲解了vxe-table组件自适应高度的两种实现方式。
el-layout + vxetable 动态高度问题
℡メ㏑╭ァ小凯
04-06 1561
按比例实现下面布局，且随页面大小高度比率不变 实现核心，就是对header 、table 、main 的style加上动态高度即可 height:calc(100vh / 2 - 50px)
element-ui设置table组件宽度（width）为百分比
热门推荐
小太阳的博客
04-28 2万+
直接设置width：'xx%'是无效的， 所有的width都设置为min-width，然后每一个el-table-column都需要设置百分比才会生效。 代码如下： <el-table-column prop="projectName" min-width="24%" //设置百分比 label="项目点位名称"/> <el-t...
element-ui中el-table根据浏览器的缩放自适应宽度
邱先生的博客
10-21 1万+
最近有个pc端的项目，要求浏览器缩放的时候可以自适应宽度，但在使用element-ui中的el-table出现了点小问题，table-header、table-body的宽度是js动态计算的固定宽度 在网上找了一些办法、包裹一层父元素并添加position:relative,子元素添加position:absolute;width:100%,亲测是可以达到自适应的效果的. 但是！如果在table下面还需要编写页面，由于table的绝对定位，样式会乱. 其实也简单，动态计算table的高度并赋值给父元素撑起
解决element-ui中多个table在tab切换时出现高度、宽度缩小的问题，适用所用情况
qq_36076928的博客
02-17 5218
在使用element-ui中的el-tabs组件进行切换时，出现tabs中的table高度、宽度变小，网上找的方案我觉得都不够完美，要么调用doLayout方法重新渲染，要么固定表头高度，使用起来有限制。 解决方法只需在全局样式中添加以下代码： .el-table { width: 100%; display: flex; flex-direction: column; .el-table__body-wrapper { flex: 1; } } 完美解决。 ...
elementUI——el-table组件滚动条的宽度设置——css基础
yehaocheng520的博客
11-10 1万+
今天在看后台管理系统时，领导发现表格中的横向和纵向的滚动条宽度不一致，导致页面看上去很不协调： 如下： 根据上图效果：会发现：横向滚动条的高度与纵向滚动条的宽度不一致： 修改页面滚动条的宽高可以通过如下的css样式来处理： ::-webkit-scrollbar { width: 7px; height: 7px; background-color: transparent; } 只要将上面css中的width和height设置成一个数值，就可以保证横向滚动条的高度与纵向滚动条的
解决element-ui中多个table在tab切换时出现宽度缩小的问题
bestcjt的博客
12-19 1万+
用的是vue的element-ui前端框架 今天遇到一个小问题，花了我几个小时才研究 先看图 我需要在两个tab中各自放一个table，并且其中一个table的数据变化时，另一个table也需要变化，当我在第一个table删除数据后，第一个table会刷新，然后第二个table也会刷新。然后我切换到第二个tab时，table变成这样了，表格的宽度缩小。 研究了好久，最后用以下方...
elementui的el-table根据列内容长度自适应调整列宽
树上骑个猴的博客
08-06 1万+
应用： <el-table-column prop="paperNumber" :width="flexColumnWidth('paperNumber',viceTableData)" label="单号" align="center" /> 在methods{ }里写声明函数: flexColumnWidth(str,tableData,flag='max') { // str为该列的字段名(传字符串);tableData为该表格的数据
element-ui的table在flex布局下宽度一直增大的问题，解决了！！（亲测有效果）
全栈小菜鸟
10-31 2302
el-table的父元素不能是flex：1的元素，需要在外面再加一层元素，并且父元素设置成absolute，祖父元素设置成relative即可。今天开发博客后台界面时遇到了这个问题，百思不得其解！
elementUI中el-table表格在flex布局下出现表格宽度一直在增大变化的问题
07-14
对于Element UI中的el-table表格在flex布局下出现宽度一直增大变化的问题，可以尝试以下解决方案： 1. 给el-table设置固定的宽度： ``` <el-table :style="{ width: '100%' }"></el-table> ``` 这样可以保证...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值