BUG：在flex容器下面的一个flex:1的子容器里面写了个el-table用来展示列表数据，在做宽度自适应测试的时候发现该组件的宽度只会增加不会缩小。

Debug：通过控制台发现组件生成的table的宽度是动态计算的，翻查源码，发现以下代码段

也就是说，组件的resize事件是绑定在this.$el上了，这应该就是的原因所在了。

flex容器下的width:100%会一直向上继承，直到flex容器下第一级子元素，但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候，那么容器就不会收缩，自然也就触发不了resize事件了。

解决方案：可以将设置了flex属性的容器设置position:relative，然后在子元素加多一层div包裹内容，设置position:absolute; width:100%;继承父级宽度，那么内容也会继承该div的宽度了。

已测试此解决方案，但是还是不太懂原理，先分享啦

ElementUI el-table 在flex下的宽度自适应问题的更多相关文章

  1. comboBox 下拉宽度自适应

    ///适用combobox绑定datatable private void comboBox_DataSourceChanged(object sender, EventArgs e) { Combo ...

  2. element-ui中table表头表格错误问题解决

    我用的是element-ui v1.4.3 在iframe关闭和切换导航会引起有table的表格错位,解决办法: handleAdminNavTab: function(tab) { var admi ...

  3. 从零开始学ios开发（十三）：Table Views（下）Grouped and Indexed Sections

    在前面2篇关于Table View的介绍中,我们使用的Style都是Plain,没有分组,没有index,这次学习的Table View和iphone中的通讯录很像,有一个个以字符为分割的组,最右边有 ...

  4. 在 Element-UI 的 Table 组件上添加列拖拽效果

    Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...

  5. table样式测试总结tr td宽度分析

    题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设 ...

  6. vue如何循环渲染element-ui中table内容

    对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...

  7. display:flex;下的子元素width无效问题

    因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性. 该属性介绍: 一个数字,规定项目将相对于其他灵活的项目进行收缩的量. 根据上述介绍可以理 ...

  8. flex 布局 input 宽度不自适应

    flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!

  9. element-ui的table动态生成表头和数据，且表中数据可编辑

    1.实现表头的动态渲染 2.表头label和prop字段都要定义 3.去判断显示那个数据表 4.实现双击的时候在可编辑 // 双击修改 弹出input tableDbEdit(row, column, ...

随机推荐

  1. vue实现动态绑定class--（boolean）绑定class,点击有，再点击取消

    <template> <div :class="{'flag':selected}" @click=clickBtn>xxx</div>< ...

  2. VisualStudio2010配置使用Halcon

    电脑系统环境变量(path): %HALCONROOT%\bin\x86sse2-win32;%HALCONROOT%\bin\x64-win64;%HALCONROOT%\bin\dotnet20; ...

  3. 学习python-20191217（1）-Python Flask高级编程开发鱼书_第04章_应用、蓝图与视图函数

    视频01: flask框架:最上层是app,它就像一个插线板一样,比如可以插入蓝图,还可以插入其他各种flask插件. 每个蓝图又可以插入很多视图函数,并可指定静态文件夹和模板文件夹. 好的代码结构, ...

  4. 基于Python的Flask基础知识

    Flask简介 Flask 是一个使用 Python 编写的轻量级 Web 应用程序框架.Armin Ronacher带领一个名为Pocco的国际Python爱好者团队开发了Flask. 下面我们简单 ...

  5. python掉包侠与深浅拷贝

    今日所得 包 logging模块 hashlib模块 openpyxl模块 深浅拷贝 包 在学习模块的时候我们了解过模块的四种表现形式,其中的一种就是包. 什么是包? 它是一系列模块文件的结合体,表示 ...

  6. 框架之MyBatis

    什么是框架,简单的来说框架就是一个程序的半成品,而我们就是的工作就是根据我们的工作需要将其完善.MyBatis框架的作用就是将我们使用JDBC操作数据库的过程移交给MyBatis,让它来帮我们完成这些 ...

  7. Java IO: 其他字符流(下)

    作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本小节会简要概括Java IO中的PushbackReader,LineNumberReader,St ...

  8. vivado操作基本问题

    1.zynq开发板的构造以及推崇的设计理念 设计推崇的理念是设计有知识产权的可重用的IP模块. 2.操作过程中遇到的问题以及解决方法 (1)综合速度慢解决方案: 我们都知道Vivado编译起来相当的慢 ...

  9. VM Storage Policies深度解析

  10. [LC] 42. Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...