<template><div><!-- 表格 height绑定tHeight--><el-tableref="singleTable":data="tableData":height="tHeight":max-height="maxHeight"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></div>
</template>
<script>
export default {name: 'Ceshi',data() {return {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-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}],tHeight: '200' //初始高度设置maxHeight: 300,};},mounted() {//页面创建时执行一次getHeight进行赋值，顺道绑定resize事件this.$nextTick(() => {this.setTableHeight();});// 页面创建完成后添加监听window.addEventListener('resize', this.setTableHeight);},beforeDestroy() {// 页面销毁时清空监听window.removeEventListener('resize', this.setTableHeight);},methods: {setTableHeight() {// 一般来说高度和最大高度设置一个即可，我这里是两个都写出来的this.tHeight = window.innerHeight - 350;//数值350根据不同页面高度自己设置this.maxHeight = (window.innerHeight - 820) > 300 ? (window.innerHeight - 820) : 300 // 设置一个最大高度}}
};
</script>
<style scoped>
</style>