iview3.0.1版本中 Table组件在flex布局下面宽度会自动无限增加的问题

最新推荐文章于 2023-05-10 16:41:07 发布
最新推荐文章于 2023-05-10 16:41:07 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： css vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaojing1023/article/details/106824222
版权

项目中页面布局如下
最外层member-main-box采用display: flex，组件在container-panle中，MemberTop宽度固定，container-panle为flex: 1,这种情况下，组件宽度会无限增加，导致页面布局错乱
出现这种情况的原因可能是

组件本身的bug

解决办法:
1.不用flex布局
2. 使用flex布局，给container-panle一个宽度 width: calc(‘100% - MemberTop的宽度’)

[仗键走天涯]
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
解决iView Table组件宽度只变大不变小的问题
01-18
示例： <Table class=”my-table”></Table> 打开开发者工具其实你可以发现iView给table标签的宽度加上了一个明确的宽度值，而且在父元素变小的时候这个值并没有相应地变小，所以才会导致的iView Table组件只会变大不会变小。 那么我们就可以根据这个原因才决定解决方案 1、给Table组件的table标签设置一个important的width .my-table table { width: 100% !important; } 这个方法并不是特别好，因为他可能会出现table慢慢变小（而不是瞬间变小）的情况，所以看起来并不是特别好。 2、给Tabl
iview和elementUi表格宽度或高度无限拉伸变大的三种解决方案
rongyi2233的博客
08-22 2570
flex布局，表格宽度无限变宽。
笔记：iview 当table没有数据的时候 table宽度无限增加
sky8880的博客
01-24 696
1.这个问题其实很简单就是没有绝对的宽度限制加上拥有自适应的机制才会导致这种结果。 解决： 1.查看你的css里面是否有这样的机制。 比如我导致的问题就是： 修改前：???? 修改后：???? 其实就是 把flex：1换成一个相对固定的机制 ...
flex布局碰到iview的table组件后出现的诡异动效
qq_36877078的博客
10-26 392
记录view design vue库的table组件在使用过程中遇到的诡异问题
iview中tabs嵌套table，table无限延长问题
jeremygeng的博客
11-12 1970
iview中tabs嵌套table，table无限延长问题 之前在做项目的时候，使用的是Vue + iview框架；项目中有个需求，就是 需要在tab切换中，嵌套一个表格； 后来布局完成之后，一看效果，好家伙，这表格怎么还玩了个无限宽度呢？ 后来经过一番探索之后，发现原来是tab的动画效果导致的，只要把tab组件的 animate属性设置成false就可以了； 原因： 使用动画后，是基于trans...
Iview Table组件中各种组件扩展的使用
10-17
在本文中，我们将深入探讨Iview Table组件中的各种组件扩展，以及如何在实际应用中实现多选框选中与禁选设置，以及在Table组件中点击Icon弹出Poptip的两种方法。Iview Table是基于Vue.js的UI组件库，提供了丰富的...
解决iview table组件里的 固定列 表格不自适应的问题
01-18
当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', ...
iview的table组件自带的过滤器实现
10-16
本文将深入探讨如何在 Iview 的 Table 组件中使用自带的过滤器来实现数据筛选，以及如何解决在分页情况下实现筛选的问题。 1. **Ivew Table 的过滤器基础使用** 在 Ivew 的 Table 组件中，我们可以为列定义 `...
iview组件的tabs中嵌套table
chanyeloGril的博客
08-26 754
Vue项目中iview组件的tabs中嵌套table，table表格无限延长的问题. 需求： 在切换tab中，需要嵌套一个表格，布局搭建好之后，看效果，表格的宽度无限延长。 原因： tabs中的动画效果引起的。 使用动画效果后，是基于translateX来进行水平方向的移动，保证显示与隐藏。 不使用动画，是通过设置属性display：none与block；实现tab的显示与隐藏。 解决的办法： 在tabs组件上设置 :animated=“false” 就可以了。 完美解决！ ...
前端界面缩放(自适应宽高)问题
jsxiaochen的博客
08-24 3410
前端界面缩放(自适应宽高)问题 话不多说直接上代码！！！！ HTML 代码 //HTML 代码 <body onload='init()'> <div class="all"> <div class="header"> </div> <div class="left"> <div class="left_item"> <
element-ui 表格组件设置最大高度后 宽度无限拉长问题
xiexie16888的博客
05-14 9472
table表格中的属性是可添加的所以需要给table添加一个滚动条 所以就做了如下操作： .el-table { width: 100%; >>> .el-table__body-wrapper { max-height: 300px; } } 更改过后就出现了表格宽度无限拉长的情况； 检查后发现造成这样的原因有两个： 一个是由于父级元素为flex布局， 另一个问题是没有给table表格添加一个高度 只是给他的子级组件.el-table__body-wrapper添
iview中Table根据浏览器宽度自适应
清黎浅帆
03-11 3568
直接修改iview样式： .ivu-table-wrapper { width: 100% !important; .ivu-table-header table, .ivu-table-body table, .ivu-table-tip table { width: 100% !important; table-layout: auto; } }
antd table组件在flex布局下宽度自动无限增加
最新发布
microcosm1994的博客
05-10 833
antd table组件在flex布局下宽度自动无限增加。
iview table组件里的 固定列 表格不自适应问题
不积跬步何以至千里
03-03 5853
相信大家肯定遇到过当在使用iview的组件Table表格时 固定列 表格列宽不等 在表格平铺时 不能自适应宽度 如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'lef...
Vue.js iview实现树形权限表（可扩展表）
热门推荐
月想容的博客
04-12 3万+
问题： 需要一个可折叠的权限管理系统，用表格展示。 主要用的iView组件库，有Table（表格），Tree（树形控件），Collapse（折叠面板）看起来比较符合意思 深入查看Table相关范例，发现有个通过给columns数据设置一项，指定type: 'expand'，即可开启扩展功能 可以考虑 但也只是展开详细...
iview render设置属性_vue iview组件表格 render函数的使用教程
weixin_39761491的博客
12-21 320
本文介绍了如何理解Vue的render函数的具体用法，分享给大家，具体如下： 第一个参数(必须) - {String | Object | Function} !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titlerender/title script src="https://cdn.bootcss.com/vue/2.3.4/vue...
iview table表格在项目中的应用（记录）
qq_41188808的博客
05-24 377
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
iView——Table表格
发子鸡的博客
06-18 2万+
iView——Table表格 24栅格系统，将区域进行24等分，总和一定是为24 属性 col必须放在row里面，span+offset总和为24，offset为左右偏移；另外注意flex填充、结合Bootstrap 实现响应式布局 <Row> <Col flex="2">2 / 5</Col> <Col flex="3">3 / 5</Col> </Row> gutter order（col）改变排列顺序
iview ui vue2,table组件中在里面插入可以填写的input框，并且可以校验规则
04-19
在iview ui vue2的table组件中插入可编辑的input框，您可以通过table的slot-scope属性来插入可编辑的input框，具体代码如下： <Table :data="tableData"> , column }"> [column.key]" @on-blur="validateInput...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值