el-table高度自适应vue页面指令

应用情况

当页面结构要求铺满整个页面时，table高度要求设置成自适应剩下的高度

项目构造

vue2+elementUI

实现

设置自定义指令，计算其他的高度后，手动设置table的高度

代码

/*** 自定义指令：实现元素高度自适应* 使用方式：v-resize="{ height: number, id?: string, class?: string }"*/export default {// 指令第一次绑定到元素时调用inserted(el, bind) {const _el = el.children[0]; // 获取第一个子元素// 创建resize事件处理函数let func = () => bind.def.runs(bind, _el);bind.def.func = func; // 保存函数引用，用于后续移除事件监听window.addEventListener("resize", func); // 添加窗口大小改变监听bind.def.runs(bind, _el); // 初始化时执行一次},// 组件更新时调用componentUpdated(el, bind) {const _el = el.children[0];bind.def.runs(bind, _el);},// 核心处理函数：计算并设置元素高度runs(fun, el) {// 获取目标元素let query = fun.def.query(el, fun.value);// 获取body高度let body = document.getElementsByTagName("body")[0];let height = body.getBoundingClientRect().height;// 获取预留高度let less = 0;if (fun.value.height) {less = fun.value.height;}setTimeout(() => {// 获取元素距离顶部的距离let top = fun.def.getPoint(query);// 计算元素应该的高度：视口高度 - 顶部距离 - 预留高度let hei = height - top - less;query.style.height = hei + "px";// 处理 element-ui 表格的特殊情况let child = query.querySelector(".el-table__body-wrapper");let fixWrapper = query.querySelector(".el-table__fixed-body-wrapper");if (child) {// 获取表头高度let table_head = query.querySelector(".el-table__header-wrapper");let table_head_height =parseInt(window.getComputedStyle(table_head).height) + 2;// 计算表格体的高度const wrapperHeight = hei - table_head_height + "px";// 设置表格体高度child.style.height = wrapperHeight;// 设置固定列的高度if (fixWrapper) {fixWrapper.style.height = wrapperHeight;}}}, 100);},// 查询目标元素的工具函数query(el, selector) {if (selector.id) {return document.getElementById(selector.id); // 通过ID查找}if (selector.class) {let names = selector.class.replace(/\s+/g, "."); // 处理类名中的空格let name = "." + names;return el.querySelector(name); // 通过类名查找}return el; // 默认返回当前元素},// 计算元素到顶部的距离getPoint(obj) {var t = obj.offsetTop; // 当前元素相对于父元素的偏移var l = obj.offsetLeft;// 循环向上遍历父元素，累加偏移值while ((obj = obj.offsetParent)) {t += obj.offsetTop;l += obj.offsetLeft;}return t;},// 指令解绑时移除事件监听unbind(el, bind) {window.removeEventListener("resize", bind.def.func);},
};