el-table配合flex布局时不缩小
当这个侧边栏收缩再次展开的时候
这个主
区域的内容就会出现横向的滚动条
像这样后来呢我又试了一下
其实只要我们把浏览器拉窄
大家看
他就会出现滚动条
原因是这个表格没有跟着变窄
所以他撑宽了主区域
但是呢如果我现在刷新
大看表格就变窄了
而且这时候我才把浏览器拖拽变宽
大家看表格是跟着变宽的
也就是说：这个表格
会跟着变宽
大家看：但不会跟着变窄
这就很神奇
那难道
我们设置的这个百分之百的宽度
不起作用吗
我们给它设成%
80看一下
大家看：现在宽度是80%我们拉窄
哎80%可以
那我们再试一下侧边栏
大家看：也没问题
90%呢
大家看：也没问题
侧边栏
也没问题
也就是说：
他只有在百分之百的时候有问题
我们用99%试试
大概是可以的哈
但仔细看
这个表格
还是有个慢慢缩小回来的动画
看那为什么会这样呢
说到这里呢
我们要从 el-table 的这个功能说起
他有一个固定表头的功能
那这个功能是怎么实现的呢
我们来检查一下他的元素
也就是说：他为了让上面这个表头能
固定住
做了一个假的表格在这浮动着
然后下边的表格在这滚动
我们把这个删掉试一下
大家看上面就没有了
所以：el-table 为了保持他这个表头
大家看这个表头
和他下面这一列的内容能对得齐
所以他一定要用固定的宽度来设置好
上面的表头有多宽
下面的表格有多宽
包括这两个表格的
每一列的宽度一定要一致
否则就容易出现对不齐的情况
所以呢：即使我们
给这个表格设置了一个百分比的宽度
但在页面上，el-table
还是会把它写一个固定的宽度
我们来检查一下
大家看：现在是556像素
我们把它拉窄一点
看看他一直在变
那这个动作是由 js 来完成的
也就是说：里面这个表格宽度的变化
一定是由 js
监听到了
浏览器尺寸发生变化之后来实现的
好那这是一个关键的结论
那问题就来了
为什么同样是浏览器缩放
他拉宽就可以、拉窄就不行呢？
这就涉及到了另一个
关于 flex 布局的知识点
我们来看一下这个demo
这里有一个横向的 flex 布局
他们整体
会占用浏览器70%的宽度
所以呢当我拉伸的时候
大家看
主区域会跟着变
比如说主区域被设置了 flex: 1
他会自动收缩和填充满剩余的空间
那么我在里边写点元素大家看一下
假如我写点文字
当我再次拉伸的时候大家看
只要我的黄色区域
一旦小于了文字的宽度以后
他就不会再缩小了
也就是说：这个flex是1的容器
他的宽度是不会小于他
里面内容的宽度
他宽可以
但是缩小的时候他是不会小于里面
内容的宽度
这是默认的情况下
那回过头来我们再说刚才的table
我们把这里边再放一个刚才的table
啊大家看
我们把它在缩小的时候
为什么它不生效呢 （el-table 不缩小）
原因是由于这个el-table
被设置了一个固定宽度
而这个固定的宽度
恰好等于了
他外面这个（flex:1的容器）的宽度
导致了我们再去缩小他的时候
这个黄色的容器不会再缩小了
这样呢就导致里面的 el-table
不会接收到这个浏览器缩放的事件
所以
他就不会去用 js 改变自身的宽度
那怎么解决这个问题呢
我们再回过头来看一下
当他是这些文字的时候
我们给他加一个 overflow: auto
我们再来看一下
缩小
大家看他就会缩小了
但是呢他下边会出现滚动条
当然了我们还可以把它设置成hidden
这样呢他就看不到后面内容了
他也不能滚动了
但是呢他不
他还是会缩小的
那么只要我们设置了这样的
overflow
意味着不管里边的内容有多大
我们外面黄色的容器都会一直缩小
所以即使里面放了一个表格
这个表格也会接收到
浏览器缩放的这么一个事件
他就会自己再去改变他自身的宽度
我们再来试一下
把这个换成
el-table
我们再来看一下
刷新
拉宽没问题
大家注意看拉窄
也没问题了
那还有一种设置方法呢
就是我们把这个
flex:1 的容器
加一个最小宽度也可以解决
大家看
也是可以的
因为只要你想办法让里面的el-table
能接收到浏览器缩放的这么一个事件
他就可以实现这个效果
所以我们再回到
刚才这个问题怎么来解决呢
我们找到他这个main布局
我们给他加一个
overflow
等于 auto
我们再来试一下刷新
大家看这样就解决了
或者我们给他换成
最小宽度
等于0
我们再来试一下
变宽变窄也没问题
最后更新于