UI组件库-表格高度自适应

各种UI组件库都有表格组件，有的叫 table，有的叫 data grid，反正都是为了展示大量数据。

像Element的table组件，功能很强大，代码也很多，我们的目标不是copy一个Element的table，而是要根据自己的需求，尽量简化代码，尽量容易使用。

今天讨论的是表格高度自适应这个功能，Element的table是没有的，但却是我们项目中常用的，所以一定要加上它！

Element可以通过给table组件加一个height属性，让table的高度固定，我们之前在用Element的时候，会根据情况，动态设置table的高度，然后我们就可以得到一个高度自适应的表格了，为了避免重复代码，我们还用了一个mixin来完成具体逻辑，混入到需要的组件内。虽然这样也能实现我们的需求，但是不如table本身就有一个这样的能力来的更方便一点，是不是也有兴趣了？

一、动态计算出表格应该有的高度

如上图，蓝色部分就是表格在目前的情况下应该有的高度，怎么算出来，自由选择，略过

二、给表格增加一个属性

这个属性就是我们需要减去的固定值，当然可以计算出来，不过对于这样布局一旦确定就基本不会变化的管理系统来说，直接量出来就可以了，你懂的。

这个属性的名字，我觉得用 height 不太合适，height 让人觉得会是表格的高度，看下面的代码

    <Table :height="179" @selection-change="handleChange" :columns="columns" :data="data"></Table>

后来，经过慎重考虑，决定用 othersHeight，言下之意就是“表格其它部分的”高度，大家尽量担待

    <Table :othersHeight="179" @selection-change="handleChange" :columns="columns" :data="data"></Table>

感觉好多了哈

三、动态计算表格应有高度

其它部分的高度有了，我们先在组件挂载完成后计算一下表格应用的高度；然后还要有监听窗口的resize事件，在窗口发生变化的时候，动态得到高度，重新设置表格的高度以适应新的页面。代码如下：

还有一点，表格的高度最开始还是要给一个默认值的，我这里是给了300px，你自己定吧

最后

你已经可以在不同的组件内引入我们的表格组件，根据当前组件的实际情况，给表格组件设置上合适的 othersHeight，改变浏览器窗口的大小，你发现你的表格已经动起来了，恭喜你！

你看，不同情况下都适应吧，而且都是正好浏览器不出现垂直滚动条的情况下

END