Vue 自适应高度表格的实现方法


Posted in Javascript onMay 13, 2020

前言

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

Vue 自适应高度表格的实现方法

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

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

Vue 自适应高度表格的实现方法

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

Vue 自适应高度表格的实现方法

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

Vue 自适应高度表格的实现方法

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

Vue 自适应高度表格的实现方法

想要满足上述条件就需要使用 v-adaptive 指令了。

Vue 自定义指令

你可能会好奇 v-adaptive 是在哪里来的?它是自定义的指令,设置表格高度需要对普通 DOM 元素进行底层操作。Vue 除了核心功能默认内置的指令 ( v-model 和  v-show ),也允许注册自定义指令,相关 Api 可以查看 官方文档 。

v-adaptive

新建包名 src/directive/el-table ,创建 adaptive.js 。页面缩放的监听是使用的 element-ui 中的 resize-event ,将 addResizeListenerremoveResizeListener 引入进来。自定义指令要用到的钩子函数:

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • unbind:只调用一次,指令与元素解绑时调用。
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'

 // 设置表格高度
 const doResize = async(el, binding, vnode) => {
 // 获取表格Dom对象
 const { componentInstance: $table } = await vnode
 // 获取调用传递过来的数据 
 const { value } = binding

 if (!$table.height) {
  throw new Error(`el-$table must set the height. Such as height='100px'`)
 }
 // 获取距底部距离(用于展示页码等信息)
 const bottomOffset = (value && value.bottomOffset) || 30

 if (!$table) return

 // 计算列表高度并设置
 const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
 $table.layout.setHeight(height)
 $table.doLayout()
}

export default {  
  // 初始化设置
  bind(el, binding, vnode) { 
    // 设置resize监听方法
    el.resizeListener = async() => { 
      await doResize(el, binding, vnode)
    }    
    // 绑定监听方法到addResizeListener
    addResizeListener(window.document.body, el.resizeListener)  
  },  
  // 绑定默认高度
  async inserted(el, binding, vnode) { 
    await doResize(el, binding, vnode)  
  },  
  // 销毁时设置
  unbind(el) { 
    // 移除resize监听
    removeResizeListener(el, el.resizeListener)  
  }
}

接下来,需要将写好的逻辑绑定到 Vue 中,在同一目录下新建 index.js

import adaptive from './adaptive'

const install = function(Vue) {   
  // 绑定v-adaptive指令
  Vue.directive('adaptive', adaptive)
}

if (window.Vue) {
  window['adaptive'] = adaptive  
  // eslint-disable-next-line no-undef 
  Vue.use(install)
}

adaptive.install = install

export default adaptive

在单页面使用

指令相关代码已经写好了,接下来就是该如何使用了。找到想要设置表格自适应高度的 vue 文件,在 script 标签下引入自定义的指令并绑定。

import adaptive from '@/directive/el-table'
export default { 
  name:'Test',
  directives: { adaptive },
  ... ...
}

然后找到表格所在的标签添加指令相关的代码:

<el-table  
  ref="table"
  // 自定义指令,bottomOffset 代表距离底部的距离
  v-adaptive="{bottomOffset: 85}"
  // 高度属性,100无具体意义,仅为初始值,不可省略
  height="100px" 
 >
 ... ...
 </table>

全局使用

如果存在多个页面需要设置自适应高度,为了减少使用指令的复杂度,我们可以在 main.js 中全局引入自定义的指令,上述 script 的内容就不需要在每个页面进行写入了。

import adaptive from './directive/el-table'

Vue.use(adaptive)

结尾

源码放在 GitHub 上了,希望可以帮助到你。

 到此这篇关于Vue 自适应高度表格的实现方法的文章就介绍到这了,更多相关Vue 自适应高度表格内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
js 数据类型判断的方法
Dec 03 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
ES6函数实现排它两种写法解析
May 13 #Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 #Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 #Javascript
原生JS实现汇率转换功能代码实例
May 13 #Javascript
JavaScript Tab菜单实现过程解析
May 13 #Javascript
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
element中el-container容器与div布局区分详解
May 13 #Javascript
You might like
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
php中执行系统命令的方法
2015/03/21 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
Python入门篇之面向对象
2014/10/20 Python
用python读写excel的方法
2014/11/18 Python
python中星号变量的几种特殊用法
2016/09/07 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python