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控制的

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值