各种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