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 相关文章推荐
JS array 数组详解
Mar 22 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
JavaScript中DOM详解
Apr 13 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 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
Destoon模板制作简明教程
2014/06/20 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
网页常用特效代码整理
2006/06/23 Javascript
JavaScript confirm选择判断
2008/10/18 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
javascript解析json实例详解
2014/11/05 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
Node.js JSON模块用法实例分析
2019/01/04 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
管理科学大学生求职信
2013/11/13 职场文书
2014年政教处工作总结
2014/12/20 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Golang实现AES对称加密的过程详解
2021/05/20 Golang
python 解决微分方程的操作(数值解法)
2021/05/26 Python
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL