el-popover嵌套时，打开内部的popover后，点击外部popover的空白部分无法将内部popover关闭

在项目开发中我们经常会碰到这种情况，列表表格当中嵌套的某一项点击时会弹出弹出框例如下图这种情况：

这种表格嵌套弹出框的一般没有什么问题，也很简单，但是最近在开发中却遇到了这样一种情况，点击列表中的某一项会弹出弹框，弹框中嵌套的是表格，表格中的列又可以点击弹出弹框，具体情况如下图所示：

表格中有两列是可以在点开的

那么这时候就遇到了一个问题，每次点击一个新的弹框，之前打开的弹框不会关闭，而且点击弹框以外的其他空白部分弹框也关不了，这个问题怎么解决呢？在网上搜了一圈发现相关文章较少，只发现了两篇：
https://blog.csdn.net/qq_40544434/article/details/115627828
https://www.cnblogs.com/workJiang/p/14550791.html
所以我决定把自己这个问题记录一下
解决弹框无法正常关闭的总体思路就是使用它自带的doClose()方法，至于为什么会造成这种弹框无法关闭的现象，我也不太清楚，下边是我的大致解决过程
1、首先给每一个弹框一个独一无二的ref(也可以给他们统一的ref，我感觉我这里不适合使用统一的解决，就用了下面的方法)

 <el-popover
   :ref="'popverbag' + scope.$index"
    placement="right"
    @show="getBagcount(scope)">
    <service-bag-tree :ref="'bagsTree' + scope.$index" />
    <el-button slot="reference" type="text">
     {{ scope.row.service_bag_count }}
    el-button>
 el-popover>
 <el-popover
 :ref="'popoverSys' + scope.$index"
  placement="right"
  @show="getBusinessList(scope)">
  <business-system-select :ref="'systemTree' + scope.$index" />
  <el-button slot="reference" type="text" style="margin-left: 46px">
       {{ scope.row.business_count }}
   el-button>
 el-popover>

2、点击按钮获取对应的子组件，阻止冒泡，并获取到所有的popover
获取所有的popover的函数

    getRefs() {
       let obj = this.$refs
       this.bagRefs = []
       this.sysRefs = []
       for (let key in obj) {
         if (key.slice(0, key.length - 1) == 'popverbag') {
           this.bagRefs.push(obj[key])
         }
         if (key.slice(0, key.length - 1) == 'popoverSys') {
           this.sysRefs.push(obj[key])
         }
       }
       return [this.bagRefs, this.sysRefs]
     },
   getBagcount(scope) {
       let rowRef = 'bagsTree' + scope.$index
       this.$nextTick(() => {
         this.$refs[rowRef].getBags(scope.row)
       })//获取对应子组件
       var e = window.event || arguments.callee.caller.arguments[0]
       e.stopPropagation()//组织冒泡
       let list = this.getRefs()//获取popover
       console.log(list)
       list[1].forEach((item, index) => item.doClose())//点击当前列，其他列的弹框需关闭
       list[0].forEach((item, index) => {
         if (index != scope.$index) {//判断当前点击的弹框是哪一个，关闭其他的弹框
           item.doClose()
         }
       })
     },

3、以上操作可以关掉其他弹框，却依旧不能在点击弹框外的空白部分将弹框关闭，这时就需要在外层的表格中添加一个函数

 <el-table :data="items" max-height="300px" @click.native="closeAll"></el-table>
  closeAll() {
      let obj = this.$refs
      for (let key in obj) {
        if (
          key.slice(0, key.length - 1) == 'popverbag' ||
          key.slice(0, key.length - 1) == 'popoverSys'
        ) {
          obj[key].doClose()
        }
      }
    },
   点击表格其他部分关闭当前点开的弹框