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-tablev-loading="tableLoading"class="mt-2"id="elTable"ref="elTable":height="tableHeight":data="tableData"stripeborderstyle="width: 100%"
>

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

在 methods 中添加方法即可

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