vue解决element-ui popover弹出框点击取消时 popover的显示与隐藏问题
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">
·
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()
},
更多推荐
已为社区贡献3条内容
所有评论(0)