解决vuetify表格组件自适应自适应父级高度

通过获取父级元素高度减去表格头部和底部高度，达到适应高度.elementUi等也可参考此思路注意计算高度的函数防抖要不能在 methods 中加

<template>
    <v-data-table v-model="selected" :height="tableHeight">
        <template v-slot:top>
            <div ref="top" class="tableTools">
                <slot name="top"></slot>
            </div>
        </template>
    </v-data-table>
</template>

<script>
import debounce from "lodash/debounce"
export default {
    props:{
        height: {
            type: Number,
            default: () => null
        }
    },
    data(){
        return {
            selected:[],
            tableHeight: 300,
            debounceOnResizeCalc: null,
        }
    },
    created (){
        /**
         * 使组件实例拥有独立的防抖函数实例，因组件是单例的所以不能把防抖事件加载下面的methods中，
         * 不然当组件再同一个页面调用了多次这个组件这个会防抖函数只会执行一次
        */
        this.debounceOnResizeCalc = debounce(this.onResizeCalc, 200)
    },
    mounted() {
        // 监听窗口变化 这个this.$bus全局的消息总线，没有的可以改为原生的方式
        this.$bus.$on('windowResize', () => {
            this.debounceOnResizeCalc()
        })
    },
    methods: {
        resizeCalcHeight(){
            //计算高度 
            let thatHeight = null
            if (!this.height) {
                const toolsHeight = this.$refs.top?.offsetHeight || 0
                // 父级元素
                let prevHeight = this.$el.parentElement ? this.$el.parentElement.offsetHeight : 0
                thatHeight = prevHeight - toolsHeight - 2
            } else {
                thatHeight = this.height 
            }
            this.tableHeight = thatHeight
        }
    }
}
</script>

<style>
</style>