因为tabs组件会默认调取所有界面的接口的数据,再点击后是不会再次调取的。由于我做的项目不符合该模式,所以做出了一些调整。
html部分
<div class="layout-container">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="新的询价" name="NewInquiry"> // 给每个tab添加name 属性
<NewInquiry v-if="tabsSwitch.NewInquiry" /> // 然后给每个界面添加v-if判断是否显示
</el-tab-pane>
<el-tab-pane label="准备报价" name="PrepareOffer">
<PrepareOffer v-if="tabsSwitch.PrepareOffer" />
</el-tab-pane>
<el-tab-pane label="已报价" name="OrderOffer">
<OrderOffer v-if="tabsSwitch.OrderOffer" />
</el-tab-pane>
<el-tab-pane label="回绝报价" name="RejectOffer">
<RejectOffer v-if="tabsSwitch.RejectOffer" />
</el-tab-pane>
</el-tabs>
</div>
</template>
script 部分
import { defineComponent, ref } from "vue";
import NewInquiry from "./mallTabs/newlnqyury.vue"; //这四个界面引入
import OrderOffer from "./mallTabs/orderOffer.vue";
import PrepareOffer from "./mallTabs/prepareOffer.vue";
import RejectOffer from "./mallTabs/rejectOffer.vue";
export default defineComponent({
components: {
NewInquiry,
OrderOffer,
PrepareOffer,
RejectOffer,
},
setup() {
const activeName = ref("NewInquiry"); // 默认显示的界面
let tabsSwitch: any = ref({ //设置是否显示
NewInquiry: true,
PrepareOffer: false,
OrderOffer: false,
RejectOffer: false,
});
const handleClick = (tab: any) => { //点击事件
for (var i in tabsSwitch.value) { //循环对象中的属性
if (tab.props.name != i) { //判断点击的name不等于 tabsSwith里的属性
tabsSwitch.value[i] = false; //不相等的改成false 不显示
} else {
tabsSwitch.value[i] = true; // 相等的改成true 显示
}
}
};
return {
activeName,
handleClick,
tabsSwitch,
};
},
});
</script>
最终效果