頁面自適應高度,iview--table爲例
<template>
<div style="min-width: 1024px !important">
<Table :height="mheight" :data="data" :columns="columns">
</div>
</template>
<script>
export default {
data() {
return{
mheight: 0,
screenHeight: document.body.clientHeight,
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
},
created() {
this.mheight = this.screenHeight - 150;
},
watch: { //監聽screenHeight屬性值的變化
screenHeight(val) {
this.mheight = this.screenHeight - 150;
}
},
mounted() {
window.onresize = () => {
return (() => {
this.screenHeight = document.body.clientHeight;
})()
}
}
}
</script>