1. Page rendering

The tableHeight property binds a variable tableHeight to dynamically set the tableHeight:

<template> <div class="app-container"> <div style="background-color:green; padding:20px; margin-bottom:30px"> <el-table :data="table1_info.tableData11" style="width: 100%;" border :height="tableHeight" > <el-table-column v-for="(item,index1) in table1_info.tableData11[0]" :key="index1" align="center" :label="index1" > <template slot-scope="scope"> {{ scope.row[index1] }} </template> </el-table-column> </el-table> </div> </div> </template>Copy the code

2. Define table rendering data and required variables

Data () {return {tableHeight: window.innerheight-260, // screenHeight: Window. InnerHeight, / / content area highly table1_info: {title: 'table 1, tableData11: [{' 1', '1', 'value 2', '2', 'value 3', '3'}, {' 1 ': '11', 'value 2': '22',' value 3': '33'}]},},Copy the code

Monitor the screenHeight of the content area

Set tableHeight dynamically by listening on screenHeight

watch: ScreenHeight (val) {this.screenheight = val this.tableheight = this.screenheight -260} },Copy the code

4. Browser size changes

Reassign screenHeight whenever the browser size changes

mounted: Onresize = () => {return (() => {// window.innerheight: the available height of the browser window.screenHeight = window.innerHeight this.screenHeight = window.screenHeight })() } },Copy the code

5. Effect display

When the browser displays in full screen:

When the browser shrinks: