ele tabs 组件点击对应标签后再获取数据渲染（个人笔记）

因为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>

最终效果