江苏龙网

  1. 主页 > 生活百科 > >

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

UI组件库

各种UI组件库都有表格组件，有的叫 table，有的叫 data grid，反正都是为了展示大量数据 。
像Element的table组件，功能很强大，代码也很多，我们的目标不是copy一个Element的table，而是要根据自己的需求，尽量简化代码，尽量容易使用 。
今天讨论的是表格高度自适应这个功能，Element的table是没有的，但却是我们项目中常用的，所以一定要加上它！
Element可以通过给table组件加一个height属性，让table的高度固定，我们之前在用Element的时候，会根据情况，动态设置table的高度，然后我们就可以得到一个高度自适应的表格了，为了避免重复代码，我们还用了一个mixin来完成具体逻辑，混入到需要的组件内 。虽然这样也能实现我们的需求，但是不如table本身就有一个这样的能力来的更方便一点，是不是也有兴趣了？
一、动态计算出表格应该有的高度
UI组件库-表格高度自适应

文章插图
 
如上图，蓝色部分就是表格在目前的情况下应该有的高度，怎么算出来，自由选择，略过
二、给表格增加一个属性
这个属性就是我们需要减去的固定值，当然可以计算出来，不过对于这样布局一旦确定就基本不会变化的管理系统来说，直接量出来就可以了，你懂的 。
【UI组件库-表格高度自适应】这个属性的名字，我觉得用 height 不太合适，height 让人觉得会是表格的高度，看下面的代码
<Table :height="179" @selection-change="handleChange" :columns="columns" :data=https://www.isolves.com/it/cxkf/cxy/2020-07-26/"data">后来，经过慎重考虑，决定用 othersHeight，言下之意就是“表格其它部分的”高度，大家尽量担待
<Table :othersHeight="179" @selection-change="handleChange" :columns="columns" :data=https://www.isolves.com/it/cxkf/cxy/2020-07-26/"data">感觉好多了哈
三、动态计算表格应有高度
其它部分的高度有了，我们先在组件挂载完成后计算一下表格应用的高度；然后还要有监听窗口的resize事件，在窗口发生变化的时候，动态得到高度，重新设置表格的高度以适应新的页面 。代码如下：
UI组件库-表格高度自适应

文章插图
 
还有一点，表格的高度最开始还是要给一个默认值的，我这里是给了300px，你自己定吧
最后
你已经可以在不同的组件内引入我们的表格组件，根据当前组件的实际情况，给表格组件设置上合适的 othersHeight，改变浏览器窗口的大小，你发现你的表格已经动起来了，恭喜你！
UI组件库-表格高度自适应

文章插图
 

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

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




    推荐阅读


    上一篇：嵌入式开发内核编译zImage和uImage的区别

    下一篇：架构大更新的英特尔Rocket Lake处理器可将频率提升至5.0GHz