el-tabs栏数据缓存问题(数据过多渲染时长不够问题)

最近在做vue项目的时候,出现了数据渲染不出来.原本是因为请求过多,不能先添加到数组中在进行渲染.之后,因客户需求改成了tabs形式.问题就直接完全暴露出来了!

解决方法:进行子组件刷新(tabs下的东西被我拆分成了子组件)

代码如下:

HTML部分:

   <main class="coins-main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="XX钱包" name="first">
          <BalancesTabds v-if="hackResetBuy"></BalancesTabds>
        </el-tab-pane>
        <el-tab-pane label="XX钱包" name="second">
          <BibiBalancesTable v-if="hackReset"></BibiBalancesTable>
        </el-tab-pane>
      </el-tabs>
    </main>

JS部分:

  data() {
    return {
      activeName: 'first',
      hackReset: true,
      hackResetBuy: true,
    };
  },
  created() {
    // 初始化时候,进行first部分的二次刷新
    if (this.activeName == 'first') {
      this.$nextTick(() => {
        this.hackResetBuy = true;
      });
    }
  },
  methods: {
    handleClick(tab, event) {
      // 切换tab栏时,在进行一次子组件刷新
      // console.log(tab, event);
      if (this.activeName == 'second') {
        this.hackReset = false;
        this.$nextTick(() => {
          this.hackReset = true;
        });
      } else {
        this.hackResetBuy = false;
        this.$nextTick(() => {
          this.hackResetBuy = true;
        });
      }
    },
  },

重点在于:

   this.$nextTick(() => {
       XXXXXXXXXX
   });