项目场景:
奇奇怪怪的产品大佬们提了个反人类的需求,要根据有无数据显示不同的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控制的