通过is属性动态渲染组件
<template>
<div class="tabs-select">
<a-tabs :default-active-key="defaultActiveKey" size="small">
<a-tab-pane
v-for="item in tabs"
:key="item.key"
:tab="item.tab"
:force-render="true"
>
<component
:is="item.key"
:type="type"
:provinces-prop="provincesProp"
:date-time="dateTime"
:deleted-props="deletedProps"
@selectProps="selectProps($event, item.key)"
/>
</a-tab-pane>
</a-tabs>
</div>
</template>
js 文件中引入component
<script>
import { tabs } from './config'
const tabComponents = {}
for (let i = 0; i < tabs.length; i++) {
tabComponents[tabs[i].key] = tabs[i].import
}
export default {
name: 'Tabs',
components: tabComponents,
props: {
type: {
type: String,
default: ''
},
deletedProps: {
type: Object,
default: () => {
return {}
}
},
provincesProp: {
type: Array,
default: () => {
return []
}
},
dateTime: {
type: String,
default: ''
}
},
data() {
return {
tabs
}
},
computed: {
defaultActiveKey() {
return this.tabs[0].key
}
},
watch: {},
mounted() {},
beforeDestroy() {
this.$store.commit('severe/setSelectedProps', {})
},
methods: {
selectProps(val, key) {
this.$emit('selectProps', val, key)
}
}
}
</script>
对应的config文件
const tabs = [
{
key: 'publicWarn',
tab: '预警信号',
import: () => import('./Warning/index')
},
{
key: 'obsStation',
tab: '气象站',
import: () => import('./Station/index')
},
{
key: 'lightning',
tab: '雷电',
import: () => import('./Thunder/index')
},
{
key: 'firePoint',
tab: '山火',
import: () => import('./Fire/index')
},
{
key: 'satellite',
tab: '卫星',
import: () => import('./Satellite/index')
},
{
key: 'radar',
tab: '雷达',
import: () => import('./Radar/index')
}
]
export { tabs }
注:可以使用 <keep-alive> - 组件切换保留数据 (此处没有使用)
<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们