element-ui tabs标签嵌套使用时 基础下划线不显示的问题

前几天写到 tabs标签 嵌套使用的时候，嵌套的tabs 下划线无法显示，记录下解决办法

在内层tabs 上添加v-if =“外层tabs的activeName”，意思为当选中这个嵌套的页面时才挂载 内层tabs

实例：

<template>
    <div class="billManage">
        <div class="content-box">
            <el-tabs class="ovewview-tab" v-model="activeName" @tab-click="handleTabChange">
                <el-tab-pane label="账户标注" name="accountMark">
                    1111111
                </el-tab-pane>

                <el-tab-pane label="时间分割点" name="timeSplit">
					2222222
                </el-tab-pane>
                <el-tab-pane label="网点库" name="Outlets">
                    <div class="tab-con">
                      <el-tabs v-model="smallActive" @tab-click="outletClick" v-if="activeName == 'Outlets'"
            class="outlet_tab" :stretch="true">
			               <el-tab-pane label="搜索结果" name="first" :key="'first'">333333</el-tab-pane>
			                <el-tab-pane label="我的网点库" name="second" :key="'second'">
									44444444
							</el-tab-pane>
			            </el-tabs>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
export default {
    props: {},
    components:{},
    data() {
        return {
            activeName: "accountMark",
            smallActive: "first"
        };
    },
    computed: {},
    created() {

    },
    mounted() {

    },
    methods: {
        handleTabChange(tab, event) {
            console.log(this.activeName);
        },
        outletClick(tab, event) {
            console.log(tab, event);
        },
    }
};
</script>

<style scoped>
.billManage{
    padding: 20px;
    
}
</style>

主要在这里