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

约定不等于承诺〃 2021-09-07 17:10 3215阅读 2赞

前几天写到 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70]  
主要在这里

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70]: /images/20210813/60e19df7c7d0478eba6916e51deb5e5e.png