参考链接，https://www.cnblogs.com/daicw/p/11926308.html
改进后效果：
1、每页展示10行
2、行和标题高度都为50px
3、表格高度自适应
模板代码：
<template> <div class="form-wrap"> <div class="form-top"> <div class="searchInput"> <el-input placeholder="请输入内容" v-model="searchKey"> <i slot="suffix" class="el-input__icon el-icon-search"></i> </el-input> </div> <div class="searchBtn"> <el-button type="info" @click="addForm">新增</el-button> <el-button type="info">导出项目列表</el-button> </div> </div> <div class="form-middle" ref="tabWrap"> <el-table ref="table" :data="tableData" border style="width: 100%" :height="tableHeight" @selection-change="handleSelectionChange" :row-style="{ height: rowHeight + ‘px‘ }" :header-cell-style="{ height: headerHeight + ‘px‘ }" > <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div> <div class="form-bottom"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" > </el-pagination> </div> </div> </template> <script> export default { name: "intentionProjectList", data() { return { searchKey: "", currentPage: 2, tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", }, { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", }, { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", }, { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, ], multipleSelection: [], tableHeight: "500", rowHeight: 50, //行高 headerHeight: 50, // 表头高 }; }, created() { this.$nextTick(() => { let that = this; //计算el-table父容器的高度 let offsetHeight = that.$refs.tabWrap.offsetHeight; //默认展示10行，如果表格行小于10个，那么表格高度等于行高*行数 + 表头高 + 2根边框border高度 if (offsetHeight > 50 * 10 + 50) { that.tableHeight = that.tableData.length > 0 ? that.tableData.length * 50 + 50 + 2 : 0; } else { //如果表格行足够，那么表格高度等于父容器高度 that.tableHeight = offsetHeight; } }); }, mounted() { const that = this; this.$nextTick(() => { window.onresize = () => { return (() => { //计算el-table父容器的高度 let offsetHeight = that.$refs.tabWrap.offsetHeight; //默认展示10行，如果表格行小于10个，那么表格高度等于行高*行数 + 表头高 + 2根边框border高度 if (offsetHeight > 50 * 10 + 50) { that.tableHeight = that.tableData.length > 0 ? that.tableData.length * 50 + 50 + 2 : 0; } else { //如果表格行足够，那么表格高度等于父容器高度 that.tableHeight = offsetHeight; } })(); }; }); }, methods: { handleIconClick() {}, addForm() { this.$emit("changeTab", "newForm"); }, handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); }, handleSelectionChange(val) { this.multipleSelection = val; } }, }; </script> <style scoped lang="scss"> .form-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; .form-top { width: 100%; height: 100px; line-height: 100px; display: flex; flex-direction: row; align-content: center; align-items: center; .searchInput { width: 400px; } .searchBtn { margin-left: 10px; .el-button--info { color: #fff; background-color: #455676; border-color: #455676; margin-left: 40px !important; &:hover { background-color: #409eff; border-color: #409eff; } } } } .form-middle { height: calc(100% - 150px); width: 100%; display: flex; overflow-y: hidden; } .form-bottom { height: 50px; width: 100%; display: flex; align-items: center; } ::-webkit-scrollbar { width: 10px !important; height: 8px !important; background-color: #515a6e !important; -webkit-transition: background-color 0.3s ease-in-out !important; transition: background-color 0.3s ease-in-out !important; } ::-webkit-scrollbar:hover { background-color: #d1d1d1 !important; } ::-webkit-scrollbar-thumb { background-color: #dcdfe6 !important; height: 50px !important; -webkit-border-radius: 5px !important; border-radius: 5px !important; border-right: 1px solid #fff !important; border-left: 1px solid #fff !important; -webkit-transition: background-color 0.3s ease-in-out !important; transition: background-color 0.3s ease-in-out !important; } ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: rgba(23, 35, 61, 0.8) !important; border-right: 1px solid #f1f1f1 !important; border-left: 1px solid #f1f1f1 !important; } ::-webkit-scrollbar-track { background-color: #fff !important; } ::-webkit-scrollbar-track:hover { background-color: #fff !important; } } </style>
另外：
如果使用了postcss-px-to-viewport，那么需要排除对.el-table类的视窗单位转换，因为el-table元素内高度会转换成视窗单位，但是.el-table的总体宽度不会被转成视窗单位，造成高度溢出，设置如下：
"postcss-px-to-viewport": { selectorBlackList: [".el-table"],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 }