vue+element ui根据浏览器大小动态设置el-table的高度，实现自适应

<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>

data() {
return {
tableHeight: window.innerHeight - 260, //表格动态高度
screenHeight: window.innerHeight, //内容区域高度
table1_info: {
title: '表格1',
tableData11: [
{
'值1': '1',
'值2': '2',
'值3': '3'
},
{
'值1': '11',
'值2': '22',
'值3': '33'
}
]
},
}
},

 

watch: {
// 监听screenHeight从而改变table的高度
screenHeight(val) {
this.screenHeight = val
this.tableHeight = this.screenHeight - 260
}
},

mounted: function() {
// window.onresize:浏览器尺寸变化响应事件
window.onresize = () => {
return (() => {
// window.innerHeight:浏览器的可用高度
window.screenHeight = window.innerHeight
this.screenHeight = window.screenHeight
})()
}
},