1. Zeichnen Sie eine Vue-Oberfläche und möchten Sie, dass sich der El-Table-Teil dieser Seite ändert, wenn die Seite vergrößert oder verkleinert wird.
Mounted(() => {
window.onresize = function windowResize(){
let that = _this;
_this.tableHeight = window.innerHeight - 100 - 280 + "px";
}
})
Die obigen -100, -280 beziehen sich auf die Höhe von el-header und el-footer, und es gibt nur eine el-table in el-main.
<el-header style="height: 100px;width: 100%;"></el-header>
<el-main style="width: 100%;margin-top:0px;margin-bottom: 0px;padding-top: 0px;padding-bottom: 0px;">
<el-table style="padding-top: 0px;padding-bottom: 0px;" :height="tableHeight">
</el-table>
</el-main>
<el-footer style="height: 280px;width: 100%;position: fixed;bottom: 0px;"></el-footer>