vue.js javascript Vue3-elementui中el-tabs切换实时更新数据

el-tabs 使用时会一次性把所有 tab 里的请求读完，之后进行 tab 切换，不再重新读取请求 想要实现切换 tab ，通过以下代码实现实时更新数据的要求

其中 

、 、

分别为自定义的tab子页面。即为表格页面

// 切换tab自动刷新实现

const activeName = ref('all')

const tabRefresh = reactive({

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

}

好文链接

 您阅读本篇文章共花了：