vue 基于element-ui 开发Layout 自动计算表格高度组件

<template>
    <div :class="`layout_page${className ? ' ' + className : ''}`">
        <header ref="header" class="layout_header">
            <slot name="header"> </slot>
        </header>
        <main ref="table" class="layout_table">
            <slot name="table" :tableHeight="tableHeight"> </slot>
        </main>
        <footer ref="footer" class="layout_footer">
            <slot name="footer"> </slot>
        </footer>
    </div>
</template>

<script>
import { debounceNew } from '@/utils';
export default {
    name: 'LayoutPage',
    props: {
　　　　　// 开启计算 动态列的情况需要等到数据加载完成调用　
        initIsCalculate: {
            type: Boolean,
            default: false,
        },
        className: {
            type: String,
            default: '',
        },
　　　   // 是否是动态列
        isDynameicColumn: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            tableHeight: 500,
        };
    },
    mounted() {
　　　　  // 不是动态列 直接开启计算
        if (!this.isDynameicColumn) {
            this.$nextTick(() => {
                this.calculateTableHeight();
                window.onresize = debounceNew(this.calculateTableHeight, 300);
            });
        }
    },
    watch: {
　　　　　// 如果是动态列 等到数据加载完成后 计算
        initIsCalculate(newVal) {
            if (newVal && this.isDynameicColumn) {
                this.calculateTableHeight();
                window.onresize = () => {
                    debounceNew(this.calculateTableHeight, 100);
                };
            }
        },
    },
    methods: {
        calculateTableHeight() {
            const navbarHeight = 84;
            const headerHeight = this.$refs.header.offsetHeight;
            const footerHeight = this.$refs.footer.offsetHeight;
            const windowHeight = document.documentElement.offsetHeight;
            const paginationHeight = document.querySelector('.el-pagination').offsetHeight;
            const tableHeight =
                windowHeight - navbarHeight - headerHeight - paginationHeight - footerHeight;
            this.tableHeight = tableHeight;
            // document.querySelector('.el-table').style.height = `${tableHeight}px`;
            // const tableHeaderHeight = document.querySelector(
            //     '.el-table__header-wrapper'
            // ).offsetHeight;
            // document.querySelector('.el-table__body-wrapper').style.overflow = `auto`;
            // document.querySelector('.el-table__body-wrapper').style.height = `${
            //     tableHeight - tableHeaderHeight
            // }px`;
        },
    },
    beforeDestroy() {
        window.onresize = null;
    },
};
</script>
<style lang="scss" scoped>
.layout_page {
    .layout_header {
        padding: 10px 10px 0;
    }
}
</style>

调用：

<template>
    <Layout
        className="system_manage_detail"
        :isDynameicColumn="true"
        :initIsCalculate="initIsCalculate"
    >
        <template #header>
        </template>
        <template #table="{ tableHeight }">
            <el-table
                ref="table"
                :height="tableHeight"
                :data="tableData"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
                @row-click="handleRowClick"
                @sort-change="handleSortChange"
            >
            </el-table>
        </template>
    </Layout>
</template>