vue设置元素高度自适应

VUE设置元素高度自适应

<div ref="element" :style="{ height: `${elementHeight}px` }"></div>

data(){
  return {
     elementHeight: 50
  }
},
    mounted:function(){
       this.$nextTick(() => {
           // this.$refs.element.$el.offsetTop：元素距离浏览器顶部的高度
           this.elementHeight = window.innerHeight - this.$refs.element.$el.offsetTop;
          
           // 监听窗口大小变化
           let context = this;
           window.onresize = () => {
              context.elementHeight = window.innerHeight - context.$refs.element.$el.offsetTop;
           }
        })
或者
this.$nextTick(() => {
        // 根据浏览器高度设置初始高度
        this.elementHeight = window.innerHeight - 165;
        // 监听浏览器高度变化，改变表格高度
        window.onresize = () => {
          this.elementHeight = window.innerHeight - 165;
        };
      });
        
    }

　　参考：https://www.cnblogs.com/hakood/p/14816881.html