Vue custom monitor element width and height instructions

Add in 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)
  },
})

Using custom directives

<div v-resize="getHeight">

table set height

<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, // 设置一个初始高度
    }
}

Just add the method in 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
},