el-tab页签懒加载

开始设置:lazy="true",第一次都是正常的

看似没有问题，但是再整个数据刷新的时候，之前选中页面的内容却不会更新

<el-tabs tab-position="left" class="dayunTabs">
                    <el-tab-pane v-for="(dayun,index) in zpPan.daYuns" :key="index" class="dayun-tab-pane" :lazy="true">
                        <template #label>
                            <div>{{ dayun.dayunStr }}</div>
                            <div>({{ dayun.startAge }}~{{ dayun.endAge }}岁)</div>
                        </template>
                        <el-scrollbar class="sj-box">
                            <div class="part">
                                <header>大运</header>
                                <dayun-item :bazi="zpsj.bazi" :sex="condForm.sex" :dayun="dayun.dayunStr"></dayun-item>
                            </div>
                            <div class="part">
                                <header>流年</header>
                                <el-collapse>
                                    <liunian-panel v-for="(liunian,index) in dayun.liuNians" :key="index" 
                                        :liunian="liunian.liunianStr" :year="liunian.year" :sex="condForm.sex" :bazi="zpsj.bazi"
                                        :dayun="dayun.dayunStr">
                                    </liunian-panel>
                                </el-collapse>
                            </div>
                        </el-scrollbar>
                    </el-tab-pane>
                </el-tabs>

如果在开发调试的时候，更是麻烦，因为后台一改动不需要重新自动编译，前台还是没有变过来，开发效率太低。这个时候先不要着急自己想一套什么好的办法，先去网上搜索资料，进行对比，然后选择自己喜欢的方式。
vue elementui el-tabs切换tab重新加载
VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据
借鉴了上面两个，但不完全一样，给页签的名称增加了一个事件，同时利用了v-if,只要页签点击切换，数据发生变化，内部的组件就会自动改变数据

<el-tabs tab-position="left" class="dayunTabs" @tab-click="clickDayunTabs" v-model="activeDayun">
                    <el-tab-pane v-for="(dayun,index) in zpPan.daYuns" :key="index" class="dayun-tab-pane" :lazy="true" :name="dayun.dayunStr">
                        <template #label>
                            <div>{{ dayun.dayunStr }}</div>
                            <div>({{ dayun.startAge }}~{{ dayun.endAge }}岁)</div>
                        </template>
                        <el-scrollbar class="sj-box" v-if="activeDayun==dayun.dayunStr">
                            <div class="part">
                                <header>大运</header>
                                <dayun-item :bazi="zpsj.bazi" :sex="condForm.sex" :dayun="dayun.dayunStr"></dayun-item>
                            </div>
                            <div class="part">
                                <header>流年</header>
                                <el-collapse>
                                    <liunian-panel v-for="(liunian,index) in dayun.liuNians" :key="index" 
                                        :liunian="liunian.liunianStr" :year="liunian.year" :sex="condForm.sex" :bazi="zpsj.bazi"
                                        :dayun="dayun.dayunStr">
                                    </liunian-panel>
                                </el-collapse>
                            </div>
                        </el-scrollbar>
                    </el-tab-pane>
                </el-tabs>
               
import type { TabsPaneContext } from 'element-plus'
const clickDayunTabs = (tab: TabsPaneContext, event: Event) => {
    // 切换大运页签
    activeDayun.value = tab.props.name;
}