elementUI 在Table中使用Popover弹出删除确认框

Popover组件在table中使用,跟官网的会有些差别,用官方的会出现点击删除 不弹出问题.搜了好久,找到这两种解决方案
pClose()方法关闭Popover
方法1:

              <el-popover
                placement="top"
                title="确定删除？"
                width="200"
                :ref="'popover-' + scope.row.id"
                trigger="click"
              >
	                <div style="text-align: right; margin: 0">
	                  <el-button type="primary" size="mini" @click="deleteDeviceRow(scope.row)">确定</el-button>
	                  <el-button size="mini" @click="pCancel(scope.row.id)">取消</el-button>
	                </div>
	                <el-button slot="reference" type="text">删除</el-button>
              </el-popover>

方法1 截图如下:

methods: {
  deleteDeviceRow(row) {
    new Promise().then(_ => {
        /***submit处理后***/
        this.pClose(row.id)
    })
  },
  pCancel(id) {
    this.pClose(id)
  },
  pClose(id) {
    this.$refs[`popover-` + id].doClose()
  }
}

方法1 咋一看没啥问题, 实际测试会出现pClose() undefined 报错.
table-tree会出问题(删除三层数据,再删除二层数据)会出现pClose() undefined 报错.
单条table 应该 没有问题.
方法2:

<el-table>  
<el-table-column
        align="center"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="changeIcon(scope.row.id)" circle></el-button>
          <el-popover
            ref="popoverDel"
            placement="top-end"
            width="160"
            trigger="click">
            <div >
              <div class="delTip"><i class="el-icon-warning" style="color:#E6A23C"></i>提示</div>
              <p>此操作将永久删除该文件, 是否继续?</p>
              <div style="text-align: center">
                <el-button type="primary" size="mini" @click="delIcon(scope.row.id)">确定</el-button>
              </div>
            </div>
          </el-popover>
            <el-button style="margin-left: 10px" v-popover:popoverDel type="danger" size="mini" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
  </el-table>  

方法2效果如下

方法二:这里加一个取消按钮,无法让Popover取消.暂未找到解决方案

方法三!!!:完美解决
elementUI 在Table中使用Popover弹出删除确认框问题

tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          visible: false
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          visible: false
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          visible: false
		}]

给数据都加上 visible:false;

<el-popover
          placement="top"
          title="确认删除吗？"
          width="200"
          trigger="click"
          v-model="scope.row.visible">
          <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="scope.row.visible = false;">取消</el-button>
              <el-button type="primary" size="mini" @click="scope.row.visible = false;">确定</el-button>
          </div>
          <el-button type="primary" slot="reference">删除</el-button>
        </el-popover>

给操作按钮添加 slot= "reference"属性控制popover的现实，且将v-model中的值设为tableData中的visible值。点击取消或确定也要讲对应数据中的visible设为false并处理相关逻辑。若数据为后台返回。可在使用数据时遍历一遍数据，并给每条数据添加一个标识为false即可。
试了好多种解决方案,方案3 完美解决~
原文：https://blog.csdn.net/Gunahao/article/details/79491879,谢谢