ElementUI 表格el-table自适应高度随浏览器窗口变化

ElementUI 表格el-table自适应高度随浏览器窗口变化

<el-table:data="tableData":height="tableHeight"stripe><el-table-columnprop="date"label="服务器"width="180"></el-table-column>
</el-table>

首先在页面挂载时显示默认高度tableHeight,添加监听窗口变化事件,在组件销毁前移除监听事件,防止内存溢出

 data() {return {tableHeight: 0,}},mounted(){this.$nextTick(()=>{this.getHeight()})window.addEventListener('resize', this.getHeight, false)},beforeDestroy() {window.removeEventListener('resize', this.getHeight, false)},methods: {getHeight(){let element=document.documentElement.clientHeight;this.tableHeight = element - (200);},}