el-tabs 使用时会一次性把所有 tab 里的请求读完,之后进行 tab 切换,不再重新读取请求 想要实现切换 tab ,通过以下代码实现实时更新数据的要求
<template>
<el-tabs type="border-card" @tab-click="handleTabClick" v-model="activeName">
<el-tab-pane :label="t('customer.all')" name="all">
<div v-if="tabRefresh.all">
<AllCustomerIndex />
</div>
</el-tab-pane>
<el-tab-pane :label="t('customer.oneself')" name="oneself">
<div v-if="tabRefresh.oneself">
<MyCustomerIndex />
</div>
</el-tab-pane>
<el-tab-pane :label="t('customer.belong')" name="belong">
<div v-if="tabRefresh.belong">
<BelongCustomerIndex />
</div>
</el-tab-pane>
</el-tabs>
</template>
其中
<AllCustomerIndex /> 、<MyCustomerIndex /> 、<BelongCustomerIndex />
分别为自定义的tab子页面。即为表格页面
// 切换tab自动刷新实现
const activeName = ref('all')
const tabRefresh = reactive<TabRefresh>({
all: true,
oneself: false,
belong: false
})
const handleTabClick = async (tab) => {
activeName.value = tab.props.name
switch (activeName.value) {
case 'all':
await switchTab('all')
break
case 'oneself':
await switchTab('oneself')
break
case 'belong':
await switchTab('belong')
break
}}
const switchTab = async (tab) => {
Object.keys(tabRefresh).forEach((k) => {
tabRefresh[k as keyof TabRefresh] = tab == k
})
}
其中TabRefresh为自定义类型:
export type TabRefresh = { all: boolean oneself: boolean belong: boolean }
export type TabRefresh = {
all: boolean
oneself: boolean
belong: boolean
}