vue+antdesign开发踩坑记录之keep-alive刷新tab-pane

项目场景：

奇奇怪怪的产品大佬们提了个反人类的需求，要根据有无数据显示不同的pane面板，没有就不显示，但是pane业务每个面板调用的接口都不一样

当然还有一点就是项目也很古老，用的是antdesign-1.x和vue2,使开发过程变得爽之又爽。。。

---

问题描述

翻看antdesign官网，force-render设置为true后，支持被隐藏时渲染 DOM 结构，随之而来的另一个问题是，业务需求中---当前pane数据变动后同时会影响另一个pane的内容展示，数据和内容会随变动，但是这时候再点击pane，数据已经渲染了，就不会再调用接口了，（内心os:变态的需求+业务）

---

解决方案：

vue代码：

<template>
  <div v-if="showTab" class="tab-container">
    <a-tabs
      v-model:activeKey="activeKey"
      type="card"
      @nextClick="callback"
      @prevClick="callback">
      <a-tab-pane
        @change="changeTab"
        v-for="item in filteredTabsList"
        :key="item.id"
        :tab="`${item.name}`"
        :force-render="true">
        <keep-alive v-if="isRefresh">
          <component
            :is="item.component"
            v-bind="{activeKey}"
          />
        </keep-alive>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import DeepDesign from "./DeepDesign.vue";
  import BrowseDesign from "./BrowseDesign.vue";
  import LocalDesign from "./LocalDesign.vue";
  import PostAPI from "./DataApi";
  export default {
    name: "TabsContent",
    components: {
      BrowseDesign,
      DeepDesign,
      LocalDesign,
    },

    data() {
      return {
        isRefresh: true,
        tabsList: [{
          name: '深化设计',
          id: 1,
          component: 'DeepDesign',
          isShow: true,
        },{
          name: '浏览设计',
          id: 2,
          component: 'BrowseDesign',
          isShow: true,
        },{
          name: '本地设计',
          id: 3,
          component: 'LocalDesign',
          isShow: true,
        }],
        filteredTabsList: [],
        showTab: false,
        activeKey: null,
      }
    },
    
    watch: {
      filteredTabsList: {
        deep: true,
        immediate: true,
        handler: function (val) {
          // 隐藏后取第一个为activeKey
          if (val.length > 0) {
            this.activeKey = val[0].id;
          }
        }
      }
    },
    created() {
      this.getShowTab();
    },
     methods: {
      /**
       * @description: 隐藏菜单
       * @param {Number} i 1：深化 2：浏览 3：本地
       */
      onShowDesign(i){
        this.tabsList[i].isShow = false;
        this.updateFilterTabs();
        // 隐藏后取第一个为activeKey
        // if (this.filteredTabsList.length > 0) {
        //   this.activeKey = this.actionTab || this.filteredTabsList[0].id;
        // }
      },
      /**
       * @description: 刷新tab数据
       */
      refreshTab() {
        this.getShowTab();
        this.isRefresh = false,
        this.$nextTick(() => {
          this.isRefresh = true;
        });
      },
      /**
       * @description: 展示的tab
       */
      getShowTab() {
        const tempParams = {
          chanceId: this.DesignSchemeLayoutInstance.chanceData.id,
          naturalKey: this.DesignSchemeLayoutInstance.chanceData.id,
          pageSize: this.paginationInfo.pageSize,
          pageNo: this.paginationInfo.current,
        };
        Promise.all([
          PostAPI.getDeepDesign(tempParams),
          PostAPI.getBrowseDesign(tempParams),
          PostAPI.getLocalDesign(tempParams),
        ]).then((res) => {
          res.forEach((item, idx) => {
            if (item && item.success && item.result) {
              this.tabsList[idx].isShow = parseInt(item.result.total, 10) > 0;
            }
          });
          this.updateFilterTabs();
          if(this.filteredTabsList.length > 0) {
            this.activeKey = this.filteredTabsList[0].id;
          }
        });
      },
      /**
       * @description: 更新tabs
       */
      updateFilterTabs() {
        this.filteredTabsList = this.tabsList.filter((i) => i.isShow);
        this.showTab = this.filteredTabsList.length > 0;

      },
    
    }
  };
</script>
  };
</script>

 

1.初始化的时候用Promise.all调用所有接口

2.使用keep-alive后刷新可以更新数据信息

3.filteredTabsList是实际显示的tabpane，是tabList根据isShow控制的