-
要如下效果
image.png
-
- 代码
<Table:columns="columns" :data="tableData" :height="tableHeight" ></Table>
<script>
export default {
data() {
return {
tableHeight: 500,
}
},
mounted () {
setTimeout(() => {
// 得到浏览器内容高度
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
this.tableHeight = windowHeight - 220;
}, 100);
// 没有引入$用：调整浏览器的时候
window.addEventListener('resize', this.resizeHandle, true);
// 或
// 有引入$用：调整浏览器的时候
$(window).on("resize", () => {
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
this.tableHeight = windowHeight - 240;
});
},
methods: {
// 表格根据浏览器缩放
resizeHandle () {
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
this.tableHeight = windowHeight - 220;
},
}
}
</script>
