主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应。
标签:
<el-table ref="table" :data="tableData" :height="tableHeight"></el-table>
第一种JS处理方式:
export default {
data(){
return {
tableHeight: 50,
tableData: []
}
},
mounted:function(){
setTimeout(() => {
this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop;
},100)
//此处需要通过延迟方法来设置值,不然会出现值已更新,但页面没更新的问题
//this.$refs.table.$el.offsetTop:表格距离浏览器的高度
}
}
第二种JS处理方式:
export default {
data(){
return {
tableHeight: 50,
tableData: []
}
},
mounted:function(){
this.$nextTick(function () {
this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50; // 监听窗口大小变化
let self = this;
window.onresize = function() {
self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 50
}
})
//this.$refs.table.$el.offsetTop:表格距离浏览器的高度
//50表示你想要调整的表格距离底部的高度(你可以自己随意调整),因为我们一般都有放分页组件的,所以需要给它留一个高度
}
}