1、首先定义一个public.mixin.js（mixin适用于多个页面需要使用到计算高度公共方法）
export default {
data() {
return {
screenHeight: document.body.clientHeight, // 这里是给到了一个默认值 （这个很重要）
tableHeight: null, // 表格高度
}
},
watch: {
// 监听屏幕高度改变表格高度
screenHeight(val) {
// 初始化表格高度
console.log(this.$refs.header.offsetHeight)
this.tableHeight = val - (this.$refs.header.offsetHeight + 150) + "px";
}
},
mounted() {
// 监听屏幕高度
window.onresize = () => {
return (() => {
window.screenHeight = document.body.clientHeight;
this.screenHeight = window.screenHeight;
})();
};
}
}
2、在index.vue文件里面编写
<div ref="header"></div>
<el-table :height="this.tableHeight">
</el-table>
<script>
import publicMinxin from "../../../common/js/public.mixin.js";
export default {
mixins: [publicMinxin],
}
// 请求表格数据后添加
// 初始化表格高度
this.tableHeight =
document.body.clientHeight -
(this.$refs.header.offsetHeight + 150) +
"px";
</script>
3、大概就这些内容谢谢大家关注，END
