-
要如下效果
image.png
-
- 代碼
<Table:columns="columns" :data="tableData" :height="tableHeight" ></Table>
<script>
export default {
data() {
return {
tableHeight: 500,
}
},
mounted () {
setTimeout(() => {
// 得到瀏覽器內(nèi)容高度
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
this.tableHeight = windowHeight - 220;
}, 100);
// 沒有引入$用：調(diào)整瀏覽器的時(shí)候
window.addEventListener('resize', this.resizeHandle, true);
// 或
// 有引入$用：調(diào)整瀏覽器的時(shí)候
$(window).on("resize", () => {
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
this.tableHeight = windowHeight - 240;
});
},
methods: {
// 表格根據(jù)瀏覽器縮放
resizeHandle () {
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
this.tableHeight = windowHeight - 220;
},
}
}
</script>
