使用antdv的a-tabs标签页,每次点击后,对下面的组件进行刷新
解决办法:
每次给子组件key更新不一样的值就可以,不一定是需要动态的,但是要是唯一,每次不一样就可以。
<template>
<page-header-wrapper>
<div>
<a-tabs default-active-key="1" @change="callback">
<a-tab-pane key="1" tab="白名单">
<tcp-client-list :key="timer1"></tcp-client-list>
</a-tab-pane>
<a-tab-pane key="2" tab="黑名单" force-render>
<tcp-client-blacklist :key="timer2"></tcp-client-blacklist>
</a-tab-pane>
</a-tabs>
</div>
</page-header-wrapper>
</template>
<script>
import TcpClientList from './modules/TcpClientList'
import TcpClientBlacklist from './modules/TcpClientBlacklist'
export default {
name: "index",
components: {
TcpClientList,
TcpClientBlacklist
},
data() {
return {
timer1: '',
timer2: '',
};
},
methods: {
callback(key) {
// console.log(key);
if (key == 1) {
this.timer1 = new Date().getTime()
} else if (key == 2) {
this.timer2 = new Date().getTime()
}
},
},
}
</script>
<style scoped>
</style>