事情的经过是这样婶的，肖哥最近接到产品的一个需求，见下图

在一个table里边点击解绑前端账号，左边弹出一个浮框，浮框里边需要两个操作按钮，肖哥根据以往丰富的写代码（搬砖）经验，熟练地打开element官方文档，把popover的代码熟练的搬了过来，三下五除二略加修改，本以为万事大吉，结果却是大相径庭。官方文档中的popover只是针对的单个的情况，像table这种循环渲染popover的情况如果照搬会死的惨绝人寰：

遇到的第一个bug：点击按钮出来的不是一个而是一堆popover

出来了一堆，显然渲染的一揽子popover共用了很多变量，为了保持popover的 唯一性，需要给el-popover设置ref属性'popover-' + scope.row.id 然后搭配el-popover的内置方法 doShow 并且trigger="manual"，其他种类 的trigger出了很多幺蛾子，无以言表！

遇到的第二个bug：弹出框出来后点击取消按钮不管用

搭配el-popover的内置方法 doClose 通过引用popover对象然后调用doClose方法 自己动手，丰衣足食，能自己撸的串绝不麻烦别人，哼！

送上核心代码

<el-popover
                placement="left"
                width="160"
                trigger="manual"
                :ref="'popover-' + scope.row.id">
                <p style="text-align: center;margin: 15px 0px">确定解绑前端账号吗？</p>
                <div style="text-align: center; margin: 0">
                  <el-button  size="mini" type="text"  @click="pCancel(scope.row.id)">取消</el-button>
                  <el-button type="primary" size="mini" @click="pSubmit(scope.row)">确定</el-button>
                </div>
                <el-button  type="primary" slot="reference" size="mini" @click="pOpen(scope.row.id)" v-if="scope.row.is_bind&&scope.row.bind_status==2">解绑前端账号
                </el-button>
              </el-popover>

  pSubmit(row) {
        store.postData(apiUrl.unbind_front_user_api,{
          user_id:row.id
        }).then((res)=>{
          if(res.body.code==1){
            this.pClose(row.id)
            this.fetchData()
          }
        })
      },
      pCancel(id) {
        this.pClose(id)
      },
      pClose(id) {
        this.$refs[`popover-` + id].doClose()
      },
      pOpen(id){
        this.$refs[`popover-` + id].doShow()
      }