elementui中el-table和el-popover冲突显示

小白遇到的问题 在网上找了一些方法解决了 所有要记录一下

需求:
1.在表格中最后一列是操作，其中有编辑和删除操作

这些操作打算用el-popover实现
但是由于el-popover是需要绑定v-model来实现

如果在el-table中直接按照官方文档写的el-popover会实现不了

因此需要给el-popover动态绑定table行 这样才不会冲突

实现代码
html

<el-table-column width="100" align="center" label="操作">
  <template slot-scope="scope">
    <el-popover width="160" :ref="`popover-${scope.$index}`">
      <p>确定删除该项吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button type="text" size="mini" @click="handleClose(scope.$index)">
          取消
        </el-button>
        <el-button type="danger" size="mini" >确定</el-button>
      </div>
      <el-button type="text" slot="reference">删除</el-button>
    </el-popover>
  </template>
</el-table-column>

js实现

   handleClose(index) {
     this.$refs[`popover-${index}`].doClose()
   }

通过handleClose来实现动态绑定
我只绑定了取消按钮 绑定确定按钮也是同样的方法

就可以实现下面这张效果 table中每一行都可以实现