Vue3使用自定义指令将vxe-table高度设为自适应（随着屏幕大小变化而变化）

1.创建自定义指令 

import {Directive, DirectiveBinding, nextTick} from 'vue'

interface ExHTMLElement extends HTMLElement {
    resizeListener: EventListener
}

export const adaptive: Directive = {
    mounted: (el: ExHTMLElement, binding: DirectiveBinding) => {

        el.resizeListener = () => {
            nextTick(() => {
                setHeight(el, binding)
            })
        }
        nextTick(() => {
            setHeight(el, binding)
        })
        window.addEventListener('resize', el.resizeListener)
    },
    unmounted(el: ExHTMLElement) {
        window.removeEventListener('resize', el.resizeListener)
    },
    updated(el: ExHTMLElement, binding: DirectiveBinding) {
        nextTick(() => {
            setHeight(el, binding)
        })
    },

}

// set el-table height
function setHeight(el: ExHTMLElement, binding: DirectiveBinding) {
    const top = el.previousSibling.offsetHeight + 88 // 88px为本项目layout中tags标签的高度和header的高度
    const bottom = binding?.value?.bottom || 48  //48px为vxe-pager的高度
    const pageHeight = window.innerHeight //整个屏幕的高度
    //1. 当表格在模态框中使用时
    if (el.parentElement.getAttribute("class") == 'vxe-modal--content') {
        el.style.height = el.parentElement.clientHeight - top - bottom - 14 + 'px'
        // 14px 是vxe-model的默认padding
    } else {    //2. 当表格在普通页面使用时
        el.style.height = pageHeight - top - bottom + 'px'
    }
    el.style.overflowY = 'auto'
}

2.将vxe-table使用一个div包裹起来 将此div设置v-adaptive属性  vxe-table的height 设为100%  （注意：分页器应放在该div的外部，与该div同级）