【学习记录】element-ui嵌套el-tabs切换下划线丢失

问题描述

在进入页面时第一个子页面有默认选中

但是当切换到第二个页面时，就失去了默认选中 

 这里我是把第二个页面写成了组件引入使用

选项放到了组件里

（设置了name和v-model也没生效）

 解决方法：

其实进入第二页时，是有选中的，但是选中的下划线样式宽度为0，

在外层点击切换页面时，给第二页的子页面选中样式赋值宽度就解决了

代码：

//第一页第二页切换 点击事件
<el-tabs @tab-click="choosePage" type="card">

//----------------------------------------------------------------------

//在组件上使用ref获取组件
<CasesPage ref="cases" />

//----------------------------------------------------------------------

//定义方法 在点击时给选中下划线赋值宽度
choosePage() {
this.$refs.cases.$el.querySelector(".el-tabs__active-bar").style.width = "36px";    
}

效果:

切换时，默认选中下划线样式丢失解决

具体长度可以通过查看上一个页面下划线长度，也可自行设置，

其他样式问题

console.log(this.$refs.cases.$el.querySelector(".el-tabs__active-bar").style);

通过以上方式查看当前样式

 总结：console.log('总结')