天天看点

表格高度自适应

直接上项目代码

<template>
 	//次处ref用于获取页面高度
  <div class="content" ref="overpass"></div> 
</template>
<script>
export default {
  data() {
  	return {
		height:0 //高度初始值为0
	}
  },
  methods: {
    // 自定义高度
    setHeight() {
      this.height = this.$refs.overpass.offsetHeight - 120;
    }
  },
  mounted() {
  		// 添加监听事件setHeight
		this.$nextTick(() => {
        window.addEventListener("resize", this.setHeight);
        this.setHeight();  //监听处理逻辑
      });
	},
	beforeDestroy() {
	  // 移除绑定的setHeight事件监听
      window.removeEventListener("resize", this.setHeight);
    },
};
</script>

<style>
//高度设置100%,这很重要!!! 
.content {
  height: 100%;
  width: 100%;
}
</style>