Element-ui Tabs 实现按需加载，加载后无需重新加载

<template>
  <div class="demo-container">
    <el-tabs v-model="tabName" type="card" @tab-click="tabsClick">
      <el-tab-pane label="我同步的" name="selfAsync">
        <SelefAsync v-if="loadTabs.selfAsync" :params="params" ref="selfAsync" />
      </el-tab-pane>
      <el-tab-pane label="系统同步的" name="systemAsync">
        <SystemAsync v-if="loadTabs.systemAsync" :params="params" ref="systemAsync" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import SelfAsync from './components/selfAsync'
import SystemAsync from './components/systemAsync'

export default {
  components: { SelfAsync, SystemAsync },
  date() {
    return {
      loadTabs: {
        selfAsync: true,
        systemAsync: false,
      },
    }
  },
  methods: {
    /**
     * @description tabs 切换时触发验证，实现按需加载
     */
    tabsClick({ name }) {
      if (!this.loadTabs[name]) this.loadTabs[name] = true
    },
    /**
     * @description 搜索处理
     */
    searchHandler() {
      // 实现按需加载
      for (let key in this.loadTabs) {
        this.loadTabs[key] = false
      }
      this.loadTabs[this.tabName] = true
      this.$refs[this.tabName].fetchData(true)
    },
  },
}
</script>