ieplus/back-ui/src/views/dz/papers/list.vue

<template>
    <div class="app-container" v-loading="loading">
        <el-tabs v-model="currentTab">
            <el-tab-pane v-for="t in tabs" :label="t.label" :name="t.name">
                <component :is="t.page" v-if="t.visited"/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup name="PaperList">

import {useProvideGlobalLoading} from "@/views/hooks/useGlobalLoading.js";
import ListExactIntelligent from "@/views/dz/papers/components/list-exact-intelligent.vue";
import ListFullIntelligent from "@/views/dz/papers/components/list-full-intelligent.vue";
import ListExactHand from "@/views/dz/papers/components/list-exact-hand.vue";
import ListFullHand from "@/views/dz/papers/components/list-full-hand.vue";

const {loading} = useProvideGlobalLoading()

const tabs = ref([{
    name: 'ExactIntelligent',
    label: '定向智能',
    page: markRaw(ListExactIntelligent) ,
    visited: true
}, {
    name: 'FullIntelligent',
    label: '全量智能',
    page: markRaw(ListFullIntelligent),
    visited: false
}, {
    name: 'ExactHand',
    label: '定向手动',
    page: markRaw(ListExactHand),
    visited: false
}, {
    name: 'FullHand',
    label: '全量手动',
    page: markRaw(ListFullHand),
    visited: false
}])
const currentTab = ref('ExactIntelligent')

watch(currentTab, tabName => {
    // 通过visited=true 延迟渲染
    const tab = tabs.value.find(t => t.name == tabName)
    if (tab) tab.visited = true
})
</script>

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