el-popover 悬浮展示 el-tabs 首次选中效果丢失

一、 问题描述：

在使用 el-popover 时，悬浮的内容包含 el-tabs 组件，el-tabs虽然设置了选中的 key，但因为初次渲染时 悬浮部分还没有被触发展示，选中效果丢失

二、解决方案

• 利用 el-popover 自带的方法 after-enter 和 after-leave
• after-enter ：先设置选中的 key 为空，再设置为 默认的 key
• 若只使用上述 after-enter，则有可能会造成：下一次展示悬浮窗的同时，从别的 key 回到 默认key，这个切换过程是当着用户的面执行的，所以使用 after-leave 使这个过程对用户无感
• after-leave 和 after-enter 共用一个函数体即可

三、代码

父组件

<el-popover
  trigger="hover"
  placement="top"
  width="338"
  @after-enter="enterPopover"
  @after-leave="enterPopover"
>
  <popoverContent ref="refPopoverContent" />
  <template slot="reference">
    <span>11111</span>
  </template >
</el-popover>


methods: {
  enterPopover () {
     const ele = this.$refs['refPopoverContent']
     ele.resetTab()
  }
}

子组件 popoverContent

<el-tabs v-model="activeName">
  <el-tab-pane label="数据目录" name="first">
    11
  </el-tab-pane>
  <el-tab-pane label="节点机理" name="second">
    22
  </el-tab-pane>
</el-tabs>


data() {
  return {
    activeName: 'first'
  }
},
methods: {
  // 父组件控制tab选中（先设置为空，再设置为默认的 key）
  resetTab () {
    this.activeName = ''
    this.activeName = 'first'
  }
}