vue指令方式实现element table高度随浏览器和部分dom变化适应

主要代码

v-resize="resetTableHeight"

// 监听高度变化
resetTableHeight() {
  // 监听到searchArea高度变化使ivu-table-body高度发生改变
  if (document.getElementsByClassName('el-table__body-wrapper')[0]) {
    this.clientHeight = document.getElementsByClassName('searchArea')[0].clientHeight
    document.getElementsByClassName('el-table__body-wrapper')[0].style.height = `calc(100vh - ${this.clientHeight + 163}px)`
  }
},

使用，跟随searchArea区域变化而变化

    <div class="searchArea"  v-resize="resetTableHeight">
    </div>

methods方法

    // 监听高度变化
    resetTableHeight() {
      // 监听到searchArea高度变化使el-table__body-wrapper高度发生改变
      if (document.getElementsByClassName('el-table__body-wrapper')[0]) {
        this.clientHeight = document.getElementsByClassName('searchArea')[0].clientHeight
        document.getElementsByClassName('el-table__body-wrapper')[0].style.height = `calc(100vh - ${this.clientHeight + 163}px)`
      }
    },

utils创建工具

// 监听元素高度变化
//将该代码定义为一个js文件
let resize = {
  bind(el,binding) {
    let width = '', height = '';
    function isResize() {
      const style = document.defaultView.getComputedStyle(el);
      if (width !== style.width || height !== style.height) {
        binding.value();
      }
      width = style.width;
      height = style.height;
    }
    el._vueSetInterval_ = setInterval(isResize,100);
  },
  unbind(el) {
    clearInterval(el._vueSetInterval_);
  }
}
export default resize;

引入即可