element-ui的table组件在flex布局下的宽高自适应

分割线之前，是半年多前随手记的，很乱。分割线后，是如今的归纳整理。

 

言简意赅，长话短说。

需要的效果：element-ui的table组件在垂直和水平方向能适应不同大小的显示区域，超出区域部分可实现滚动。进而强化对于控件自适应方面的理解。注：此处的显示区域不等于屏幕，显示区域大小=k * (屏幕分辨率+游览器窗口)

应用场景：将一块flex横向布局下的子区域划再分成两个部分，垂直排列，上半部分固定高度，下半部分自动获取剩余显示空间。table组件位于下半部分。

解决方案：1，仍旧使用flex布局，将主轴方向设为垂直起点在上；2，table组件的高度采用由外部样式控制，宽度设置成所在区域的宽度。

测试结果：变更游览器窗口大小显示比例不失真，超出显示区域部分，无论垂直还是水平都可滚动。

过程：

1，关于flex布局：1）flex下的子控件在主轴方向上的尺寸是无效的。如：横向排列，子控件的width属性无效，子控件的尺寸受flex属性影响。2）子控件在主轴方向上的尺寸可以被子子控件撑大。比如：横向排列，子控件下的子子控件的width超出了子控件，则子控件会被撑大；3）非主轴方向上的尺寸不会被子子控件撑大。比如：横向排列，子子控件的height超出子控件，子控件不会被撑大。4）flex下子控件为了自适应显示区域，把width和height设置100%时，在子控件的外层包一层absolute，否则设置的100%会很离奇。100%的参照是很有意思的。以flex横向排列时的width为例，我目前的理解是：子控件的width属性100% = 递归(布局，父控件的实际大小及width属性)，就是说：a）position！=absolute时，子控件会依据父控件的width来确定100%，但是父控件如果没有width属性，则会向上递归。b）position==absolute时，width100%根据其参照父控件的实际大小来确定。上述两点是经过验证的，其实也很好验证，下文的table获取width时，就很好验证了上述两点。题外话：给子子控件设置成position:absolute，则可免除对子控件的影响。absolute除了提供参照外，还免除了子控件对父控件的影响。

2，table组件自适应：1）根据element-ui的文档table组件可设置高度也可受控于外部样式。设置高度时，所设高度覆盖外部样式，但如果table处于flex布局下，根据上述“关于flex布局”第1）点，所设高度自然会无效。也就实现了自适应高度。2）table在flex布局下，height属性无论是自设还是受控于外部样式，都不起作用，实际height由flex确定。但是，height必须设置，否则会无法滚动。所以，table的height属性应该是兼顾两层含义：开启table滚动以及确定table的高度。此时，height可以随意填写。3）table的width设置成100%即可，由于table所在区域整个flex横向布局下，width受最近一个带有width属性的父控件影响，并非时实际显示区域的width大小。table的width与实际显示不匹配则无法实现横向滚动。因此，根据上述“关于flex布局”第4）点，需要能动态获得显示区域的宽度，此时只需将显示区域设置成absolute，然后将整个显示区域置于flex横向布局下。此处无实例很难理解，但归纳一下就是：将区域A横向flex，生成区域A-1，A-2，A-1内嵌套的子控件，怎么自适应A变化带来的A-1的width变化。

总结：紧抓3个知识点--1，flex布局；2，属性100%的继承；3，element-ui的table组件使用。

最后，CSS布局这块的内容需要系统学习，目前的理解很多时基于实例验证后自己推断。

-------------------------------------------------人造分割线----------------------------------------------------

Appended at 20180811:

上文有太多的错漏和无关的信息

现简化下：

目的：实现element-ui的table根据显示区域大小的自适应。

1，table要适配显示区域大小的变化，必须依赖滚动。(其实任何实际内容超出显示区域的情况都需要滚动)
2，table的横向纵向滚动都需要一个基本的前提条件--让table知道显示区域的大小。(这没啥好说的)
3，所以，我们可以用弹性布局，动态的改变table的显示区域大小。
4，如何让table准确知道当前显示区域的动态实时大小，就只有靠100%。 

5，如何保证100%继承的准确性，那就一定要明白，你定义的每一块区域的100%继承的是谁的。

其实，最容易出问题的地方，就是嵌套来嵌套去，自己都没弄清楚100%属性继承的是谁的。

比如：

.A
    display: flex
    .A-1
        flex: 0 0 200px
    .A-2
        flex: 1
        .A-2-1
            width: 100%

以上写法很坑爹。width: 100%继承的who？

.A
    display: flex
    .A-1
        flex: 0 0 200px
    .A-2
        flex: 1
        position: relative
        .A-2-1
            position: absolute
            width: 100%

这样写，就清清楚楚。A-2-1的width: 100%是继承自A-2的。A-2的position和A-2-1的position一个都不能少。

为什么A-2还要定义position，不写的话A-2-1继承就乱了。

总结下(区域A横向flex)：

1，A-1&A-2的width属性此处是无效，但是A-2-1的width属性是有效的；

2，如果A-2-1不设置position: absolute的话，A-2可以被A-2-1的width撑大；(感觉父控件很多时候受子控件影响，子控件position: absolute可以彻底免除对父控件的影响？)

3，为什么A-2-1要定义width: 100%。因为，flex弹性的是A-2，不是A-2-1。如果不定义width: 100%的话，A-2会随A大小变化，但A-2-1不会，那就何来实现自适应一说。

4，所以，如果你的table在A-2的位置，那table的width会因为flex自适应，且设置width也不会有效。但是，如果table是嵌套在A-2-1中，那必须设置width: 100%，且继承自A-2，才能实现width自适应。

5，说回element-ui，table的高度必须设置，否则无法滚动。即便你使用了纵向flex布局，你也要设置table的高度。估计table的height属性同时也是纵向滚动的开关。你甚至可以这样设置：

height="数值无关紧要，但必须要设置"(我就是这么写的)

6，说回element-ui，table的宽度，貌似是继承自父元素，只有width低于：100%才有效。就是，你要么把table的width弄小点，要么就让它自己继承去。

最最后：嵌套的层级一定要清晰，继承一定要明确。

 

 

PS：CSS这块内容还是很生疏，后续需要花精力去了解其最底层的布局策略。