使用 antdv 的 a

96 阅读1分钟

使用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>