table表格页面高度自适应铺满

请禾

已于 2024-07-02 17:27:08 修改

阅读量250

点赞数

文章标签： javascript 开发语言 vue.js

于 2023-06-16 19:06:56 首次发布

本文链接：https://blog.csdn.net/qq_53676368/article/details/131252458

版权

js写法

function computeHeight(){
      const element = document.querySelector('.my-table');// 获取table表格
      const rect = element.getBoundingClientRect();
      const tablebody = document.querySelector('.el-table__body-wrapper') // 需要设置自适应高度的元素
      const h = window.innerHeight - rect.top - 42 - 44 - 20;
      tablebody.style.minHeight = h+'px';
      tablebody.style.maxHeight = h+'px';
      tablebody.style.overflow = "auto";
 }
    computeHeight();
    window.onresize = function(){
      computeHeight();
    }

vue2指令写法

/**
 * 
 * @param {*} el 
 * @param {*} binding.value.h  除了 table__body 以外的高度
 */
function changeTableHeight(el, binding) {
  const rect = el.getBoundingClientRect();
  let tablebody = '';
  Array.from(el.children).forEach(item => {
    if (item.className.includes('el-table__body-wrapper')) {
      tablebody = item;
    }
  })
  // 42  表格标题 - 44  分页器和上边距 - 20 页面整体padding
  let h = window.innerHeight - rect.top - 42 - 44 - 20;
  if (binding.value?.h) {
    h = window.innerHeight - rect.top - binding.value.h;
  }
  tablebody.style.minHeight = h + 'px';
  tablebody.style.maxHeight = h + 'px';
  tablebody.style.overflow = "auto";
}
export default {
  bind(el, binding, vnode) {
    vnode.context.$nextTick(() => {
      changeTableHeight(el, binding);
    })
    // 定义 resizeHandler 函数
    const resizeHandler = () => {
      vnode.context.$forceUpdate();
    };
    // 监听窗口大小改变事件
    window.addEventListener('resize', resizeHandler);
    // 在解绑时移除事件监听器
    vnode.context.$on('hook:unbind', () => {
      window.removeEventListener('resize', resizeHandler);
    });
  },
}