ue+Element ui表格高度根据浏览器高度自适应
固定表格高度，Element文档里说了，可以加height属性。
比如：
<el-table :data="tbData" stripe border height="500"></el-table>
给height一个高度，这样是可以解决表头固定的问题。但是又会出现一个问题，就是不同的电脑分辨率是不一样的，500高度在小分辨屏幕可能是可以的，但是大屏幕上就很不合适了。所以我们要给这个height一个动态的值。
我们在data里定义一个tableHeight，在mounted生命周期函数里添加一个方法：
<el-table :data="tableData" style="width: 100%" :height="tableHeight">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
</el-table>
创建时获取窗口高度，在created（）执行
onresize 事件，在Vue页面mounted调用onresize监听事件 onresize 事件会在窗口或框架被调整大小时发生。
created() {
// 100是表格外其它布局占的高度，这个数值根据自己实际情况修改
this.tableHeight = window.innerHeight - 100
}
mounted() {
// 设置表格高度
this.tableHeight = window.innerHeight - 100
// / 监听浏览器窗口变化，动态计算表格高度，
window.onresize = () => {
return (() => {
this.tableHeight = window.innerHeight - 100
})()
}
}
生成效果图：
完整代码：
<template>
<div class="aside">
<el-table :data="tableData" style="width: 100%" :height="tableHeight">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class LoginLeft extends Vue {
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 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
tableHeight = 0
created() {
// 100是表格外其它布局占的高度，这个数值根据自己实际情况修改
this.tableHeight = window.innerHeight - 100
}
mounted() {
// 设置表格高度
this.tableHeight = window.innerHeight - 100
// / 监听浏览器窗口变化，动态计算表格高度，
window.onresize = () => {
return (() => {
this.tableHeight = window.innerHeight - 100
})()
}
}
}
</script>