使用ElementUi的tabs切换组件时下拉选择器出现破板情况

使用ElementUi的tabs切换组件时下拉选择器出现破板情况

项目中使用 ElementUi的tabs 来进行页面之间的切换，但是出现了页面中下拉选择器破板的情况。

代码展示：

//以下是页面根据tabs标签来完成页面的切换

<el-tabs v-model="tabName" class="tabStyle" :before-leave="beforeLeave">
    <el-tab-pane label="市场情况信息" name="first">
      <marketMsg  ref="marketMsg" />
    </el-tab-pane>
    <el-tab-pane label="调研情况信息" name="second">
      <research ref="research"/>
    </el-tab-pane>
    <el-tab-pane label="覆盖信息" name="third"> 
      <cover ref="cover" />
    </el-tab-pane>
  </el-tabs>

效果图展示：

出现的问题：
可以发现下拉选择框的样式发生了破板：

正常样式：
正常情况应该是这样：

问题原因

通过看控制台发现：ElementUi 的 tabs切换是用v-show来控制组件的显示，这样没有使得下拉框动态渲染。

解决问题

解决方法：将组件的渲染修改成v-if的形式。

这样就可以使得下拉框的样式恢复正常。

以上是在下在做项目时遇到的问题，一是为了记录一下踩过的坑；二是为遇见同样困扰的朋友提供一下我的解决方法。欢迎大家在评论区里留言，一起学习交流~