[ Element-UI ] Popover 手动隐藏 - do

在 Table 中使用 Popover 时遇到这个奇葩状况：

当 hover 到 Link 的时候，会显示 Popover，没问题。👌
但是由于 Link 上绑定了点击跳转事件，当我在 hover 着的情况下按下鼠标左键，页面是跳转了，然鹅。。。 Popover 还在！！😮
然后好像一定要再在 Popover 上晃一下它才会消失。。。

Add ref attribute to the popover

...
<el-table-column>
  <template slot-scope="scope">
    <el-popover 
      :ref="`popover-${scope.row.id}`" 
      :content="scope.row.description" 
      placement="right-start" 
      trigger="hover">
      <el-link type="primary" @click="goTo(scope.row.id)">
        {{ scope.row.name }}
      </el-link>
    </el-popover>
  </template>
</el-table-column>
...

Call doClose() manually

goTo(id) {
  this.$router.push({
    name: 'list',
    params: { id: id },
  })
  // [ hovering on item name will display its description popover ]
  // ISSUE - when hovering on item name then click to navigate to item page
  // the popover stays on the new page
  // FIX - manually close the visible popover during the routing
  scope._self.$refs[`popover-${id}`].doClose()
}