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 相关文章推荐
json简单介绍
Jun 10 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
vue实现简单的日历效果
Sep 24 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 Javascript
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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP页面间传递参数实例代码
2008/06/05 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
jquery表单验证使用插件formValidator
2012/11/10 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
原生JS实现层叠轮播图
2017/05/17 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
python分割和拼接字符串
2013/11/01 Python
Python中协程用法代码详解
2018/02/10 Python
python pandas修改列属性的方法详解
2018/06/09 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
Python常见数字运算操作实例小结
2019/03/22 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
办公室秘书自我鉴定
2014/01/18 职场文书
拉歌口号大全
2014/06/13 职场文书
新学期标语
2014/06/30 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python