相信大家在使用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的单元格上直接点击批量录入多个人信息，并且加入了键盘上下左右回车的键盘事件切换，至使我做了两版的录入方式，通过配置的方式进行切换！
有同样需求的伙伴，需要可私信！
