ue+Element ui table height is adaptive according to browser height
Fixed table height, as stated in the Element document, can add heightattributes.
for example:
<el-table :data="tbData" stripe border height="500"></el-table>
Give heighta height, which can solve the problem of fixing the header. But there will be another problem, that is, the resolution of different computers is different. 500 height may be ok on a small resolution screen, but it is very inappropriate on a large screen. So we're going to give this heighta dynamic value.
We datadefine one here tableHeightand mountedadd a method to the lifecycle function:
<el-table :data="tableData" style="width: 100%" :height="tableHeight">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
</el-table>
Get the height of the window when it is created, execute
the onresize event in created(), and call the onresize listener event in the Vue page mounted. The onresize event will occur when the window or frame is resized.
created() {
// 100是表格外其它布局占的高度，这个数值根据自己实际情况修改
this.tableHeight = window.innerHeight - 100
}
mounted() {
// 设置表格高度
this.tableHeight = window.innerHeight - 100
// / 监听浏览器窗口变化，动态计算表格高度，
window.onresize = () => {
return (() => {
this.tableHeight = window.innerHeight - 100
})()
}
}
Generating renderings:
complete code:
<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>