下面展示一些 动态调整高度的方法
。
el-table
中,max-height,可以给予固定值,或者是变量,为动态调整表格渲染效果,使用变量控制,通过方法动态获取页面高度。
// A code block
var foo = 'bar';
// 高度,固定值不用加冒号,因为是占位,所以加冒号
:max-height="dHeight";
// 数据部分,可以不预先给值
data(){
dHeight:800,
}
// An highlighted block
export default{
mounted () {
window.onresize = () => {
this.changeTableMaxHeight()
}
this.changeTableMaxHeight()
},
destroyed () {
window.onresize = null
},
//方法部分
methods: {
showFilterForm() {
this.filterActive = !this.filterActive
this.changeTableMaxHeight()
},
changeTableMaxHeight() {
let height = document.body.offsetHeight // 网页可视区域高度
if (this.filterActive) {
this.dHeight = height - 320
} else {
this.dHeight = height - 170
}
console.log(this.dHeight)
}
}
}