Vue ElementUI在el-table中使用el-popover

Vue ElementUI在el-table中使用el-popover，点击嵌套内容中的确定或取消来关闭el-popover。

<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="scope._self.$refs[`popover-${scope.$index}`].doClose()">
          取消
        </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>

方法二

<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>

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

方法三

<div ref="closepopover">
<el-table-column  label="操作">
 <template slot-scope="item">
  <el-popover
    placement="right"
    title="确定删除？"
    width="200"
    v-model="item.row.visible"
    trigger="click">
    <div style="text-align: right; margin: 0">
      <el-button size="mini" type="text" @click="updateVisible()">取消</el-button>
      <el-button type="primary" size="mini" @click="updateVisible()">确定</el-button>
    </div>
    <el-button slot="reference">删除</el-button>
  </el-popover>
</template >
</el-table-column>


//也可解决
updateVisible(){
     
    this.$refs.closepopover.click();
}