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>

主要在这里

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

element tabs 的基础类型下划线不显示
tabs 的基础类型用在多层嵌套里面导致下划线不显示,排除出style的width为0没有赋值到: 解决方法是用v-if来重新加载.
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
element中的横线,element的tab，下划线不显示的问题
页面重新加载,tabs选中tab的下划线不显示,如图所示: 和点击后的效果,如下,是不一样的 computed: { barStyle: { get: function get() { var _th ...
elementUi tabs刷新后，选中的tab下划线不显示
问题描述: 选中的tab页,刷新后,cilentWidth为0,下划线不显示.点击其他tab页后正常显示. //通过动态设置选中的tab宽度.tranform值使下划线选中resetTabActive ...
struts的比较标签,在使用时，与测试时需要留心。
大于:<logic:greaterThan> 大于等于:<logic:greaterEqual> 小于:<lessThan> 小于等于:<lessEqual& ...
关于Element UI中日期时间选择器在IE浏览器中初始化显示的兼容性问题
一.简单说明项目使用Vue+Element UI进行开发,使用了 DateTimePicker 日期时间选择器. 二.问题描述打开修改对话框(进行选择日期操作可以正常显示),在谷歌浏览器中初始化时 ...
修改element ui的导航菜单样式，包括下拉菜单
第一次使用element ui,根据项目需求,选择了NavMenu导航菜单, Element - The world's most popular Vue UI framework 首先将代码复制粘贴 ...
格式化标签、粗体、下划线等
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>格式 ...
element ui form循环嵌套表单及嵌套表单的验证方法（校验）
首先看看成果表单一级.二级嵌套的增加.删除一级.二级嵌套的表单的验证知识点一级嵌套循环:<div v-for="(item, index) in form.product ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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