VUE 实现填充剩余高度

效果图：展开前

 展开后：

 实现思路：

1、使用calc 100vh - top的高度

2、top的高度：采用element-resize-detector 组件获取

引用插件

npm install element-resize-detector

监控top的高度

mounted() {
    //监控头部变化
    var elementResizeDetectorMaker = require("element-resize-detector");
    const erdm = elementResizeDetectorMaker();
    erdm.listenTo(document.getElementById("searchPannel"), (element) => {
      this.dynGridHeight = element.offsetHeight;
      console.log("height:" + this.dynGridHeight);
    });
  },

使用top高度

<div class="table":style="'height: calc(100vh - ' +dynGridHeight +'px - 50px - 40px - 20px - 16px)'">

最后注意一点，不要用v-if ，需要用v-show，否则会偶发出现一些监控top不准的情况