el-popover组件在页面中多次触发的情况

今天在做一棵tree的时候，需要在节点上触发操作弹框，我便选用了el-popover组件。，引用后发现个问题，每次点击不同节点，el-popover的弹框会反复触发，而之前的不会消失！这不行呀，得想办法把它干掉，然后我找到了这篇文章
Element UI 中Popover组件
然后开始实践：

<div v-if="data.tier=='2'&&isLookFlag==='0'" class="secondOperate" @click.stop="()=>operatebtn(data)">
            <el-popover
              :ref="`popover-${data.oid}`"
              :visible-arrow='false'
              placement="bottom-start"
              width="120"
              popper-class='popoverClass'
              trigger="click">
              <LeftTreeOperate @operateClick='operateClick'></LeftTreeOperate>
              
              <span slot="reference" style="font-weight: bold;">···</span>
            </el-popover>
            <!-- <span>···</span> -->
          </div>

1、首先在引用的el-popover添加ref，因为我们是通过tree组件渲染，所以为了能够准确定位我们需要的popover，在ref中使用了数据中的id

:ref="`popover-${data.oid}`"

2、operatebtn方法中，我们通过data可以得到我们当前点击的节点内容，便可获取其oid，然后进行以下操作：
第一层if确保得到的是popover组件的ref，（console.log(this.$refs)可查看）
第二层准确定位我们点击的节点，具体按个人需求。

operatebtn(i) {
      for (const key in this.$refs) {
        if (key.indexOf('popover-') !== -1) {
          if (key.indexOf(i.oid) === -1) {
            this.$refs[key].doClose();
          }
        }
      }
    },

3、在operatebtn方法中，我们可以尝试打印console.log(this.$refs[key])
可以看到我们需要使用的方法doClose，效果是可以关闭所有的popover，所以在使用的时候要注意不要影响到我们需要弹框的ref嗷。
项目原因，就不给大家上截图了，使用中有问题的话可以大家一起探讨一下