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 相关文章推荐
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
vue实现滑动解锁功能
Mar 03 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开发大型项目的一点经验
2006/10/09 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
解读python如何实现决策树算法
2018/10/11 Python
python实现学员管理系统
2019/02/26 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python远程连接MySQL数据库
2019/04/19 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
软件设计的目标是什么
2016/12/04 面试题
请说出以下代码输出什么
2013/08/30 面试题
英文自荐信
2013/12/19 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
个人维稳承诺书
2015/05/04 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
Python包argparse模块常用方法
2021/06/04 Python