qimall/backend/views/components/common/com-list-page.php

<template id="com-list-page">
    <div id="app">
        <el-card class="card-breadcrumb" v-if="crumbs.length > 0">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="(item, index) in crumbs" :key="index">
                    <span 
                        v-if="item.router"
                        style="color: #409EFF;cursor: pointer"
                        @click="$navigate(getNavigateParams(item))"
                    >
                        {{ item.title }}
                    </span>
                    <template v-else>{{ item.title }}</template>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </el-card>
        <el-card class="card-body">
            <slot></slot>
        </el-card>
    </div>
</template>

<script>
    Vue.component('com-list-page', {
        template: '#com-list-page',
        props: {
            crumbs: {
                type: Array,
                default: () => {
                    return []
                }
            },
        },
        data() {
            return {

            }
        },
        computed: {
            getNavigateParams() {
                return function (item) {
                    let obj = {
                        r: item.router,
                    }

                    if (
                        item.params &&
                        typeof item.params === 'object' &&
                        Object.keys(item.params).length > 0
                    ) {
                        obj = {...obj, ...item.params}
                    }

                    return obj
                }
            }
        }
    })
</script>

<style>
    #application {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #application .card-breadcrumb {
        margin-bottom: 10px;
    }
    
    #application .page-body {
        display: flex;
    }

    #application .card-body {
        flex: 1;
    }

    #application .card-body .el-card__body {
        height: 100%;
        padding: 10px 20px;
    }

    .el-main {
        padding: 10px;
    }
</style>