shorts-admin/src/components/ListView.vue

<template>
    <div class="filter" ref="filterEl">
        <slot name="filter"></slot>
    </div>
    <slot></slot>
</template>
<script setup>
import { ref, provide, computed } from 'vue'
import { useElementBounding, useWindowSize } from '@vueuse/core'
const filterEl = ref(null)
const { height: filterHeight } = useElementBounding(filterEl)
const { height: windowHeight } = useWindowSize()
const tableHeight = computed(() => windowHeight.value - 145 - filterHeight.value)
provide('tableHeight', tableHeight)
</script>
<style lang="less" scoped>
.filter {
    :deep(> *) {
        margin-bottom: 10px;
    }
}
</style>