改进后效果：
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"],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
