关于el-popover在表格中既打不开也关不上的问题

el-popover很好用，但是它确有很大的问题

一、最普通的运用

<el-popover placement="top" width="270" v-model="popoverFlag">
  <p class="pb-4 flex leading-22">
    <i class="el-icon-error text-red mr-2 mt-1"></i>
    <span>
      <span>确认删除吗？删除后，数据无法恢复</span>
    </span>
  </p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="popoverFlag = false">取消</el-button>
    <el-button type="danger" size="mini" @click="delData">删除</el-button>
  </div>
  <el-button type="danger" plain slot="reference">删除</el-button>
</el-popover>

必需的内容：

1.el-popover中添加属性 v-model（Boolean）

2.在绑定的内容上添加 slot="reference"

二、在表格中的运用

在表格中常用于操作列

<!-- 操作 -->
<template slot-scope="scope" slot="operation">
  <el-popover popper-class="tablePop" placement="top" width="270" :ref="'pop' + scope.$index" class="mx-4">
    <p class="pb-4 flex leading-22">
      <i class="el-icon-error text-red mr-2 mt-1"></i>
      <span>
        <span>确认删除吗？删除后，数据不可恢复</span>
      </span>
    </p>
    <div style="text-align: right; margin: 0">
      <el-button size="mini" type="text" @click="closeTablePopover('pop' + scope.$index)">取消</el-button>
      <el-button type="danger" size="mini" @click="delItemData(scope.row)">删除</el-button>
    </div>
    <el-button type="text" slot="reference">删除</el-button>
  </el-popover>
</template>

1.在表格中要保持每条popover的绑定数据是唯一的，因此绑定:ref="'pop' + scope.$index"，声明唯一

2.在绑定的内容上添加 slot="reference"

一般来说，这样把数据声明唯一了，el-popover就能在表格中显示出来了

三、el-popover的隐藏

在el-popover显示出来以后，常规的调用关闭方法也失效了

// 失效（能找到该元素，不报错，就是调用不起来）
this.$refs.['pop' + scope.$index].doClose()

至于为什么失效我也无法进行判断了，但是其他的方法千千万，总有一款适合我

因此，我进行页面点击的模拟，可以实现同样的效果

// 关闭表格的删除弹窗
closeTablePopover() {
  document.body.click()
},

至此，el-popover可以在表格中显示和隐藏了

但是doClose()隐藏的问题我还是想了解一下，至于为什么会失效，还请大佬帮我解答一下