Vue怎么实现自适应高度表格

这篇文章主要讲解了Vue怎么实现自适应高度表格,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

示例版本为Element-ui 2.13.1 + Vue 2.6.11

本人是做后台开发的,由于公司业务要求需要将前后台模块进行分离,两年前选择使用vue-element-admin项目进行前台的开发,该框架集成了很多功能,特别适合对Vue很陌生的新手,公司项目组成员接受程度普遍较高。

在使用过程中<强>表格是必不可少的一个控件,用于展示数据,单页数据量过多就会导致浏览器自动生成右侧滚动条。

如果页面有头部信息或查询按钮,移动滚动条后会遮挡住这些操作和信息内容。

Element-ui中的el-table提供了设置高度的选项,在代码中设置高度属性就可以现在表格的高度,数据量过多也只会在表格内部生成滚动条,而不是整个页面生成滚动条。

但是这个高度需要固定的数值,不同的分辨率或者缩放后的浏览器使用固定高度后,不能满足只在el-table内部生成滚动条的条件。

想要满足上述条件就需要使用<代码> v-adaptive>

你可能会好奇<代码> v-adaptive> v模型> v-show>

新建包名<代码> src/指令/el-table> 适应性。js代码> element-ui> resize-event> addResizeListener 和<代码> removeResizeListener 引入进来。自定义指令要用到的钩子函数:

<李>绑定:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 <李>插入:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。 <李>解开:只调用一次,指令与元素解绑时调用。

进口{addResizeListener, removeResizeListener} & # 39; element-ui/src/跑龙套/resize-event& # 39;//设置表格高度
　　const doResize=异步(el、绑定vnode)=比;{//获取表格Dom对象
　　const {componentInstance: $表}=等待vnode//获取调用传递过来的数据
　　const {value}=绑定
　　
　　如果(! $ table.height) {
　　把新的错误(el - $表必须设置高度。例如身高=& # 39;100 px # 39;”)
　　}//获取距底部距离(用于展示页码等信息)
　　const bottomOffset=(价值,,value.bottomOffset) | | 30
　　
　　如果(! $表)返回//计算列表高度并设置
　　const高度=窗口。innerHeight el.getBoundingClientRect ()。前bottomOffset
　　table.layout.setHeight美元(高度)
　　$ table.doLayout ()
　　}
　　
　　{出口违约,//初始化设置
　　绑定,绑定(el vnode) {,//设置调整监听方法
　　埃尔。resizeListener=异步()=比;{,
　　等待doResize (el、绑定vnode)
　　},,,//绑定监听方法到addResizeListener
　　addResizeListener (window.document。身体,el.resizeListener),
　　},,//绑定默认高度
　　异步插入(el、绑定vnode) {,
　　等待doResize (el、绑定vnode),
　　},,//销毁时设置
　　解开(el) {,//移除调整监听
　　el.resizeListener removeResizeListener (el),
　　}
　　}

接下来,需要将写好的逻辑绑定到Vue中,在同一目录下新建<代码>索引。js代码: