vue3项目table高度自适应解决方法

一、问题描述：

在开发运维管理系统平台时候涉及到大量的表格的增删改查，需求要求不管table表格有无数据，数据多少，都要有个固定高度，保证底部有滚动条的一直在分页最上边的底部，而不要贴在table数据下方。

上图：

解决方案：

table表格由于是全局封装，通过配置项控制表头内容的，因此高度改成固定值不能满足所有模块的表格，因此这个地方思路：

1、将全局表格分成有几行搜索，有无button按钮，有无分页，等各种特殊情况

上图：三行搜索、有button、有分页，因此计算出的高度要减去这些和边距

//以下是aseets文件夹中css里面的写在common.less的全局样式
  @pageHeader: 64px; //头部
  @crumbs: 24px; //面包屑
  @pagePadding: 24px * 2; //上下的padding
  @pagesize:32px + 10px; //分页和分页的上padding
  @mainPage: calc(100vh - @pageHeader - @crumbs - @pagePadding);
// 三行搜索
  @twoSearch: calc(@mainPage - 24px - 156px - 32px - 32px - 8px - @pagesize);
  --page-content-search-third-min-height: @twoSearch;

2、计算出此情况下table高度最少为多少

计算出高度是@twoSearch，赋值给--page-content-search-third-min-height

//写在table界面，各个比较特殊的类的高度
.table-search-third {
  height: var(--page-content-search-third-min-height);
}

在用到他的界面配置项有个tableClass引用这个类

3、这个值获取到赋值给table，让他在窗口伸缩时候动态改变高度。

下边方法在刚进入页面或者监听到窗口伸缩时候就会去拿此模块table高度应该是多少，然后赋值给table的height，就能实现无论数据多少高度都是固定的。

//解决页面自适应问题---------------
const tableHeight = ref()
onMounted(() => {
  tableHeight.value = document.querySelector('.table')?.clientHeight

  window.addEventListener('resize', resize)
})
onUnmounted(() => {
  window.removeEventListener('resize', resize)
})
const resize = () => {
  tableHeight.value = document.querySelector('.table')?.clientHeight
}
const tableHeightClass = computed(() => {
  // console.log(tableHeight.value, ' tableHeight.value')
  if (tableHeight.value) {
    let height = tableHeight.value
    console.log(height)
    return height
  }
})

 注意：难点是整个系统使用的是一个table组件，但是每个模块table的有效高度可能由于内容差距略有差别，因此采用此方法解决。若只考虑一个table，那么直接固定高度就可以了。

本人还在学习阶段，如果有更好的解决方式很欢迎大佬前来评论！！！！！