本文介绍: el–tabs 使用时会一次性把所有 tab 里的请求读完，之后进行 tab 切换，不再重新读取请求 想要实现切换 tab ，通过以下代码实现实时更新数据的要求。分别为自定义的tab子页面。
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自动刷新实现
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
})
}export type TabRefresh = { all: boolean oneself: boolean belong: boolean }
export type TabRefresh = {
all: boolean
oneself: boolean
belong: boolean
}
原文地址:https://blog.csdn.net/qq_34431921/article/details/130701486
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_32418.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
