解决elemen-ui Table表格动态计算高度的bug----el-table__body-wrapper

大千世界，茫茫人海，相识就是一种缘分。若此篇文章对您有帮助，点个赞或点个关注呗！

相信大家在使用element-ui–Table表格组件时，都遇到过需要监听屏幕窗口的大小，动态计算table的height，达到适配屏幕尺寸的友好界面项目。网上有各种各样的办法，同样可以实现动态计算table表格的高度，前提是列的宽度width,设定为固定像素值；但是大家有没有发现切换路由到其他界面再返回到当前界面，table的表格高度少了24px（我自己测试是24px,可能会更高）。其实，这是element-ui内部的一个bug；接下来给大家呈现我的解决方案。

• 项目需求
  表格的每一列都是通过配置中心配置存储到数据库，后台查询所有列的字段名称以及对应的数据，前台调用对应的接口获取数据，采用v-for循环遍历展示。所以el-table-colum的宽度width，就不能设定为固定的像素值px。如果用户需要展示的列特别少或者特别多，这个时候所有列无法铺满整个屏幕，导致界面效果不友好！所以我设定为min-width="5%"百分比，可以适配不同分辨率的屏幕。当然，当列特别多的时候，你也可以设定固定像素值，固定fixed不同的列，中间采用滚动效果！
• Table界面------高度bug复现
  正常效果：
  
  
  切换路由到其他界面，再返回后，bug复现底部出现一部分空白，table的body部分高度，明显缩小
  
• 解决方案一：（推荐使用）
  created初始化的时候，执行calcHeight(value)方法，我写了一个公共的计算方法，有需要可直接引入

 created() {
    window.addEventListener('resize', () => {
      this.tableHeight = calcHeightx(120);
    });
    this.tableHeight = calcHeightx(120);
  },

动态计算公共方法：

//定义wappered boolean值是为了区别我自己定义的同名方法，可忽略
export function calcHeightx(value, wappered = true) {
  //项目自定义的公共header部分的高度，可忽略
  let header = variable.headerHeight;
  //value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
  value = value == undefined ? 100 : value;
  let res = window.innerHeight - parseInt(header.substring(0, header.indexOf('px'))) - value;
  if (wappered) {
    //通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
    let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
    //通过原生方法，获取dom节点的高度------获取element-ui table表格header的元素
    let header = window.document.getElementsByClassName('el-table__header-wrapper');
    //必须加延时，要不然赋不上去值
    setTimeout(() => {
      //通过上边计算得到的table高度的value值，减去table表格的header高度，剩下的通过dom节点直接强行赋给table表格的body
      wapper[0].style.height = (value - header[0].clientHeight) + 'px';
    }, 100)
  }
  return res;
}

• 解决方案二：（不推荐）
  当数据为空时，界面效果不友好，只有达到一定数据量时，才撑开页面的高度！个人感觉不是有效解决方案

 <el-table
 	    :max-height = "tableHeight"
        ref="tableHeight"
        border
        :data="tableData"
        :span-method="spanList"
        style="width: 100%;"
        :cell-class-name="tableCellClassName"
        :header-cell-style="{background:'#FFF',color:'#000000'}"
      >

完美解决，无论切换路由至其他界面，还是切换不同分辨率模式，都不会出现高度计算错误的问题！应客户的需求：原本是通过点击某行，通过’<‘el-dialog’>'的form表单实现数据的录入；结果客户需要在table的单元格上直接点击批量录入多个人信息，并且加入了键盘上下左右回车的键盘事件切换，至使我做了两版的录入方式，通过配置的方式进行切换！
有同样需求的伙伴，需要可私信！