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);
  },
};