1.解决办法如下

在el-popover中加属性 :ref="popover-${scope.$index}"

取消el-button按钮加  @click="scope._self.$refs[popover-${scope.$index}].doClose()"

2.具体代码如下

<template slot-scope="scope">
  <div class="operation">
    <el-popover trigger="click"  :ref="`popover-${scope.$index}`"  placement="top" width="100" >
      <p class="el-icon-warning">  确定删除</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()" >取消</el-button>
        <el-button type="primary" size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()" >确定</el-button>
      </div>
      <span slot="reference">删除</span>
    </el-popover>
  </div>
</template>

3. 如果想在确认按钮和取消按钮中做回调操作,你可以这样

页面vue组件内:

	<el-button size="mini" type="text" @click="no(scope)">取消</el-button>
	<el-button type="primary" size="mini" @click="yes(scope)">确定</el-button>

methods方法内

	methods: {
		yes(scope){
		  // 可以在这里执行删除数据的回调操作.......删除操作......
		  this.$message({
		    message:"点击了删除操作了",type: 'success'
		  });
		  scope._self.$refs[`popover-${scope.$index}`].doClose()
		},
		
		no(scope){
		  this.$message('点击了取消操作');
		  scope._self.$refs[`popover-${scope.$index}`].doClose()
		}
	}

项目中操作

vue页面内
在这里插入图片描述

methods方法内
在这里插入图片描述

补充一下还有一种简单明了的方法

1.在el-popover中添加属性

		ref="popoverSH"

2、在你的事件需要它显示/隐藏的地方使用

 click() {
      //点击隐藏
      this.$refs.popoverSH.doClose()
      //点击显示
      this.$refs.popoverSH.doShow()
    },
Logo

前往低代码交流专区

更多推荐