elelment table表格高度自适应 #

// 定义一个自定义指令 "autotableheight"
autotableheight: {
  // 当指令插入到元素上时执行的函数
  inserted: function (el:any) {
    // 初始化高度标志和观察状态
    let heightFlag: number = 0; // 用于记录先前的高度
    let isObserving: boolean = false; // 用于避免重复观察的标志
    // 定义一个函数用于观察容器高度的变化
    const observeContainerHeight = () => {
      // 检查是否正在观察并且元素存在，一定要有，不然会陷入死循环，页面卡死
      if (!isObserving && el) {
        isObserving = true; // 标记为正在观察
        // 获取当前容器的高度
        const height = el.clientHeight;
        // 查找元素内部的表格元素，注意你的元素class可能跟我的不同，会导致监听不到情况
        const tableBody = el.querySelector('.el-table');
        // 根据高度和条件进行相应操作
        if (heightFlag != height && tableBody) {
          heightFlag = height; // 更新高度标志
          // 根据不同的高度范围设置表格体的高度 这里我的表格高度默认是580px，所以基于580px进行判断，可以根据实际情况去修改
          if (height > 0 && height < 838 && tableBody.style.height != `580px`) {
            tableBody.style.height = `580px`;
          } else if (height > 0 && height > 838 && tableBody.style.height == `580px`) {
            tableBody.style.height = `${580 - (height - 838)}px`;
          } else if (height > 0 && height > 838 && tableBody.style.height != `580px`) {
            tableBody.style.height = `580px`;
          }
        }
        isObserving = false; // 重置观察状态
      }
    };
    setTimeout(observeContainerHeight, 0); // 在插入后稍后执行一次观察函数
    // 创建一个 MutationObserver 实例来监听容器的属性变化，强推这个
    // 这里使用的是 MutationObserver 而不是 ResizeObserver 是因为 ResizeObserver 存在兼容性问题
    const mutationObserver = new MutationObserver((mutationsList, observer) => {
      if (!isObserving) {
        observeContainerHeight(); // 当无观察时触发观察函数
      }
    });
    // 开始观察元素及其子树的属性变化
    mutationObserver.observe(el, {
      subtree: true,    // 包括所有后代节点
      attributes: true, // 监听属性的变化
    });
  },
},