环境
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"
>
这次得到的教训是，有需求先认真阅读文档。
以上。
因水平有限，上述内容可能存在问题，如发现请帮忙指出，避免误导更多人。
