el-table setting height total row does not display

 Problem: After setting the maximum height of the table, the show-summary (total row) cannot be displayed when the maximum height is exceeded.

Solution: add the updated life cycle and re-layout the table.

code:

<template>
    <el-card>
        <ele-pro-table
            ref="table"
            max-height="600"
            :header-cell-style="{ textAlign: 'center' }"
            :summary-method="getSummaries"
            show-summary
        >
        </ele-pro-table>
    </el-card>
</template>

<script>
    export default {
        data() {
            return {};
        },

        updated() {
            this.$nextTick(() => {
                this.$refs.table.doLayout();
            });
        },
        methods: {
            getSummaries() {}
        }
    };
</script>

<style></style>

References:  element -Ui, table el-table after setting the height of the total line does not display the solution - August is cool - blog garden