效果图：
代码：
<template><!--Element UI 中的Table表格组件自定义行高与整个表格自适应高度--><div><el-table :header-row-style="{height:'30px'}" :header-cell-style="{background:'#f5f7fa',padding:'0px'}" :row-style="{height:'30px'}" :cell-style="{padding:'0px'}" size='small' border style="width: 100%" :data="tableData" stripe height="calc(100vh - 150px)" :highlight-current-row='true'><el-table-column type="index" label="行号" align="center" width="50" /><el-table-column prop="id" label="编码" align="center" width="70" /><el-table-column prop="name" label="姓名" align="left" header-align="center" width="100"/><el-table-column prop="address" label="地址" align="left" header-align="center" width="150"/></el-table></div></template><script>export default {name: "Demo",data(){return {tableData: [{id: '01',name: '小红',address: '北京'},{id: '02',name: '小李',address: '上海'},{id: '03',name: '小明',address: '广州'}]}}}</script><style scoped></style>
解析：
1、:header-row-style="{height:'30px'}" 设置表格列标题的高度为30像素。
2、:header-cell-style="{background:'#f5f7fa',padding:'0px'}" 设置表格列标题的背景颜色。
3、:row-style="{height:'30px'}" 设置每行的高度为30像素。
4、height="calc(100vh - 150px)" 设置整个表格的高度。因为要自适应所以这个高度要用calc()函数计算一下。重点是100vh，这个表示当前视图100%的高度，类似与width=100%，这个值不是固定的，可根据窗口的大小自动调整，再减去一个固定值就是你要的高度了。
