【VUE】elementUI + VUE table表格点击Popover 弹出框包含确定取消

前言

最近遇到一个需求，表格里面点击按钮触发 Popover，然后可以点击关闭和确定。

具体的效果如下：

具体代码

• html部分

<el-table-column label="操作">
 <template slot-scope="scope">
    <el-popover placement="top"
                width="300"
                :ref="`popover-${scope.$index}`">
      <p>确定重新获取元数据信息吗，该过程较慢？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini"
                   @click="cancelClick (scope)">取消</el-button>
        <el-button type="primary"
                   size="mini"
                   @click="sureClick (scope)">确定</el-button>
      </div>

      <el-button slot="reference"
                 type="text">
        刷新元数据信息
      </el-button>
    </el-popover>
  </template>
</el-table-column>

• method部分

cancelClick (scope) {
 document.body.click()
  this.$message('点击了取消操作');

},
sureClick (scope) {
  document.body.click()
  // 可以在这里执行删除数据的回调操作.......删除操作......
},

亲测有效！