el-tabs多个标签页

QQ图片20220923165500.png

<template>
    <div class="content">
        <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane name='start'>
                <span slot="label"><i class="el-icon-user"></i> 申请</span>
                <start-order v-if="activeName=='start'"></start-order>
            </el-tab-pane>
            <el-tab-pane name='pending'>
                <span slot="label"><i class="el-icon-document"></i> 处理中</span>
                <pending-order v-if="activeName=='pending'" :tabName='activeName'></pending-order>
            </el-tab-pane>
            <el-tab-pane name='end'>
                <span slot="label"><i class="el-icon-document-checked"></i> 已完成</span>
                <pending-order v-if="activeName=='end'" :tabName='activeName'></pending-order>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import startOrder from './start.vue'
import pendingOrder from './pending.vue'

export default {
    components: {
        startOrder,
        pendingOrder
    },
    data() {
        return {
            activeName: 'start'
        }
    },
    methods: {
    },
}
</script> 

<style lang="scss" scoped>
</style>