vue自定义监听元素宽高指令

在 main.js 中添加

// 自定义监听元素高度变化指令
const resizerMap = new WeakMap()
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const handle = resizerMap.get(entry.target)
    if (handle) {
      handle({
        width: entry.borderBoxSize[0].inlineSize,
        height: entry.borderBoxSize[0].blockSize,
      })
    }
  }
})
Vue.directive('resize', {
  bind(el, binding) {
    resizerMap.set(el, binding.value)
    resizeObserver.observe(el)
  },
})

使用自定义指令

<div v-resize="getHeight">

表格设置高度

<el-table
  v-loading="tableLoading"
  class="mt-2"
  id="elTable"
  ref="elTable"
  :height="tableHeight"
  :data="tableData"
  stripe
  border
  style="width: 100%"
>

data(){
    return{
        tableHeight: 0, // 设置一个初始高度
    }
}

在 methods 中添加方法即可

// 设置表格高度
getHeight() {
  // 右侧总高度
  const mainHeight = document.querySelector('.right-content').offsetHeight
  // 表格距离顶部的高度
  const elTable = document.querySelector('#elTable').getBoundingClientRect()
  // 导航栏高度
  const navH = 60
  // 底部padding
  const bottomP = 30
  // 计算得到高度
  this.tableHeight = mainHeight - (elTable.top - navH) - bottomP
},