您当前的位置:首页 > 电脑百科 > 程序开发 > 程序员

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

时间:2020-07-26 11:46:46  来源:  作者:

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

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

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

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

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

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

 

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

二、给表格增加一个属性

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

这个属性的名字,我觉得用 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事件,在窗口发生变化的时候,动态得到高度,重新设置表格的高度以适应新的页面。代码如下:

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

 

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

最后

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

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

 


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

 

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

END



Tags:UI组件库   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
今天给大家分享一款超优秀的Vue免费开源UI组件库HEYUI。 heyui 一套基于 vue2.x 构建的UI组件库,star高达2.2K+。提供 50 多种丰富的组件,支持全局方法及配置、自定义主题、国...【详细内容】
2020-11-12  Tags: UI组件库  点击:(150)  评论:(0)  加入收藏
jQWidgets是一个基于jQuery JavaScript的综合性和创新性的HTML5 UI组件库,旨在帮助开发者创建专业、跨平台的Web应用程序,并最大限度的节省开发时间。jQWidgets包含30多种UI组...【详细内容】
2020-10-15  Tags: UI组件库  点击:(78)  评论:(0)  加入收藏
UI组件库中有一类特别的“组件”,它们的用法和普通的组件有区别,也有自己很明显的特点。用法上,比较简单,不需要和普通组件一样需要引入-注册-写标签,而是可以随时随地,直接通过类...【详细内容】
2020-07-31  Tags: UI组件库  点击:(66)  评论:(0)  加入收藏
各种UI组件库都有表格组件,有的叫 table,有的叫 data grid,反正都是为了展示大量数据。像Element的table组件,功能很强大,代码也很多,我们的目标不是copy一个Element的table,而是要...【详细内容】
2020-07-26  Tags: UI组件库  点击:(66)  评论:(0)  加入收藏
▌简易百科推荐
JAVA开发工程师(北京)本科 3-5年经验 面议 (招1人)岗位职责:1.负责我行应用系统的设计,完成软件编码工作,负责管理代码设计规范等工作;2.根据应用需求分析说明书,评估需求研发的可行...【详细内容】
2021-12-27  just do丶IT公众号    Tags:国企   点击:(1)  评论:(0)  加入收藏
今天聊聊编程的本质。程序就是数据结构+控制+逻辑,程序员编程工作的本质是翻译,翻译机要来了,程序员怎么办?黑客帝国中的程序黑客帝国4就要上映了,不知道前三部你看懂了么?值得多...【详细内容】
2021-12-17  博士聊IT    Tags:程序员   点击:(8)  评论:(0)  加入收藏
梦醒之后,每个人对于这份职业的未来、互联网行业的未来,以及更重要的,自己的未来都有了更现实的判断 文 | 祝颖丽编辑 | 黄俊杰一个生于 1986 年的人,他所走过的前半生:从出生起,...【详细内容】
2021-12-03    财经杂志  Tags:程序员   点击:(15)  评论:(0)  加入收藏
前些天在头条看到一个八二年的哥们,述说自己找工作屡次被拒的问题,在网上引起了广泛的讨论,这件事给我留下了很深的印象,因为这哥们和我同是程序员,都人到中年,上有老下有小。唯一...【详细内容】
2021-12-01  云南贤哥在深圳    Tags:程序员   点击:(20)  评论:(0)  加入收藏
很多读者都问过一个问题:程序员如何实现高速成长?之前也写过相关的文章,强调的主要是夯实计算机体系基础知识。 再说另一个诀窍:多看经典开源项目,这些项目大多是众多顶尖程序员...【详细内容】
2021-11-30  findyi    Tags:程序员   点击:(14)  评论:(0)  加入收藏
近日,一位45岁的网民在中国政府网留言求职,引发关注。该网民自称是一名软件开发人员,今年45岁,精通各种技术体系,“而我辞职回家半年后再回来寻找工作机会的时候,却发现连个面试...【详细内容】
2021-11-17  郭主任    Tags:程序员   点击:(42)  评论:(0)  加入收藏
即使在安全技术取得进步之后,网络犯罪仍在不断增加。据统计,网络犯罪每分钟给企业造成约 290 万美元的损失。主要是因为新技术不断涌现,难以维护安全。随着网络威胁的增加,网络...【详细内容】
2021-11-04  章大千    Tags:编程语言   点击:(40)  评论:(0)  加入收藏
北漂小伙李强(化名),在北京互联网大厂工作7年,月薪3万,离职回老家开摄影店,亏了200万。李强出生于山西一座名不经传的小城市,互联网专业大学毕业的他,没有听父母的劝言回到家乡考公...【详细内容】
2021-10-29  霸王课  今日头条  Tags:程序员   点击:(51)  评论:(0)  加入收藏
程序员是青春饭,这在国内似乎是公认的。所以很多公司不愿招大龄程序员,很多程序员也“知趣”地及早转型。有的做管理,有的做架构,我还见过改行卖保险的。总之,年龄大了不想敲代码...【详细内容】
2021-10-27  编程的艺术    Tags:   点击:(29)  评论:(0)  加入收藏
软件工程专业有Web开发、移动终端开发、大数据开发、计算机系统工程师、视频开发工程师、计算机软件应用工程师等就业方向。第一,Web开发。Web开发包括前端开发和后端开发。...【详细内容】
2021-10-19  辰新   企鹅号  Tags:软件工程   点击:(79)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条