Vue+Element 解决Popover弹出框在table列表中的问题（弹出多个弹框 || 关闭弹框失败）_a-table 点击行在当前行下面 弹出a-popover组件

在使用Vue+ElementUI做项目的过程中，在table列表中使用Popover弹出框出现的BUG让我头都大了，官网没有给出具体的解决方案，于是在百度这片肥沃的土壤里寻找答案。试了好多种方案，最终在下面博客的评论里找到了解决办法。

参考博客

下面贴出我的代码

局部代码：

<!-- 删除用户弹窗 -->
<el-popover placement="top" width="160" :ref="`deluser-popover-${scope.$index}`">
  <p>确定删除该用户吗？</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="scope._self.$refs[`deluser-popover-${scope.$index}`].doClose()">取消</el-button>
    <el-button type="primary" size="mini" @click="delUser(scope.row, scope.$index, userTableData), scope._self.$refs[`deluser-popover-${scope.$index}`].doClose()">确定</el-button>
  </div>
  <el-button type="text" size="small" slot="reference">删除</el-button>
</el-popover>

table代码 ：

          <!-- 用户列表 -->
          <el-table :data="userTableData" style="width: 100%; margin-top: 20px" size="small">
            <el-table-column prop="username" label="登录名" width="140"></el-table-column>
            <el-table-column prop="nickname" label="姓名" width="120"></el-table-column>
            <el-table-column label="身份" width="120">
              <template slot-scope="scope">
                <template v-if="scope.row.is_auditor">审计管理员</template>
                <template v-else-if="scope.row.is_supper">超级管理员</template>
                <template v-else>普通用户</template>
              </template>
            </el-table-column>
            <el-table-column prop="role_name" label="角色" width="120"></el-table-column>
            <el-table-column prop="is_active" label="状态" width="120" :filters="[{ text: '启用', value: '启用' }, { text: '禁用', value: '禁用' }]" :filter-method="filterTag">
              <template slot-scope="scope">
                <el-tag :type="scope.row.is_active ? 'success' : 'primary'" close-transition>{{ scope.row.is_active ? "启用" : "禁用" }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="last_login" label="最近登录"></el-table-column>
            <el-table-column prop="operation" label="操作" width="200">
              <template slot-scope="scope">
                <el-popover placement="top" width="160" :ref="`disuser-popover-${scope.$index}`">
                  <p>确定禁用该用户吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="scope._self.$refs[`disuser-popover-${scope.$index}`].doClose()">取消</el-button>
                    <el-button type="primary" size="mini" @click="isEnabledUser(scope.row.id, scope.row.is_active), scope._self.$refs[`disuser-popover-${scope.$index}`].doClose()">确定</el-button>
                  </div>
                  <el-button type="text" size="small" slot="reference" style="margin-right: 6px">{{ scope.row.is_active ? "禁用" : "启用" }}</el-button>
                </el-popover>
                <el-button @click="editUserForm = true" type="text" size="small" style="margin-right: 6px">编辑</el-button>
                <el-popover placement="top" width="160" :ref="`resetpw-popover-${scope.$index}`">
                  <p>重置密码为000000？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="scope._self.$refs[`resetpw-popover-${scope.$index}`].doClose()">取消</el-button>
                    <el-button type="primary" size="mini" @click="resetPW(scope.row), scope._self.$refs[`resetpw-popover-${scope.$index}`].doClose()">确定</el-button>
                  </div>
                  <el-button type="text" size="small" slot="reference" style="margin-right: 6px">重置密码</el-button>
                </el-popover>
                <!-- 删除用户弹窗 -->
                <el-popover placement="top" width="160" :ref="`deluser-popover-${scope.$index}`">
                  <p>确定删除该用户吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="scope._self.$refs[`deluser-popover-${scope.$index}`].doClose()">取消</el-button>
                    <el-button type="primary" size="mini" @click="delUser(scope.row, scope.$index, userTableData), scope._self.$refs[`deluser-popover-${scope.$index}`].doClose()">确定</el-button>
                  </div>
                  <el-button type="text" size="small" slot="reference">删除</el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>