使用a-tabs标签页，如何在页面载入时加载好所有tab页面

环境

vue3 + ant-design-vue 3.x

需求

主页面有三个tab标签页，需求是当点击概览的数字，需要对tab页面的内容进行筛选，并且需要同时作用于三个tab页。

image.png

问题

一般情况下antd的a-tabs页面在进入时，默认加载好第一个tab（包括tab下的子组件或子页面）。
当你点击第二个tab时，tab下的页面才会进行加载（如果有后端交互，也是点击后才触发）。
这样，无法实现上述：点击操作时，同时作用于三个tab页。变成了，你都点击过一次三个tab页时，才会满足上述需求。
基于这个问题，我想到进入页面时，需要同时加载好三个tab。

解决方案

首先想到一个笨办法，在onMounted钩子函数中，同时加载三个tab组件，也就是通过控制tab的activeKey来使页面载入（可以理解为模拟点击）：

// 按顺序加载GanttScheduleCalendar RequiredItemTable等三个组件
onMounted(() => {
  setTimeout(() => {
    activeKey.value = '3'
  })
  setTimeout(() => {
    activeKey.value = '2'
  })
  setTimeout(() => {
    activeKey.value = '1'
  })
})

大致能实现以上功能，但并不优雅。

之后想到了继续看看文档，发现a-tabs本来就有方法来解决这个问题：

image.png

这样我们只需要在a-tab-pane标签上加上force-render属性，设为true即可：

      <a-tab-pane
        key="2"
        :force-render="true"
        tab="tab2"
      >

这次得到的教训是，有需求先认真阅读文档。

以上。
因水平有限，上述内容可能存在问题，如发现请帮忙指出，避免误导更多人。