在el-popover组件中使用el-tabs组件时,首次进入悬浮框时,默认展示的标签下面无下划线,但标签标题的颜色已经变了,这说明v-model绑定成功了。而且点击别的标签时,下方的下划线是正常显示的。这说明在组件初次加载时有问题。
查看页面样式,发现变色下划线的width为0,而正常有下划线时应该是28。那么为什么首次进入悬浮框时width是0呢?
百度一下这个问题,发现出现这个问题都是因为嵌套使用el-tab组件造成的,解决方法多是重新加载,那么如何重新加载呢?于是抱着试一试的态度,首先在el-tabs组件中加入v-if=“ifShow”,默认值false。然后在el-popover组件中加入@show="afterEnter"(或者@after-enter="afterEnter",不推荐这个,第一次进入时会有延迟), afterEnter是个方法,在这个方法中将ifShow设为true。思路就是等popover显示完后再加载tabs组件。完成后,打开浏览器验证下。OK,问题解决了。
<el-popover
popper-class="dataPopover"
placement="bottom"
width="280"
trigger="hover"
:visible-arrow="true"
@after-enter="afterEnter"
>
<el-tabs
v-if="ifShow"
v-model="activeName"
@tab-click="handleClick"
>
<el-tab-pane
v-for="(item, index) in data.robotCounts"
:key="index"
:label="deviceStates[item.robotState]"
:name="item.robotState"
/>
</el-tabs>
<span
slot="reference"
type=""
>
<span class="el-icon-question" />
</span>
</el-popover>