vue解决element-ui popover点击取消时 popover的显示与隐藏问题

最近在项目中使用 elementui 中的table组件popover进行开发，官网的案例如果使用数据遍历，操作列使用<template></template>做 插槽的话就不行了。记录下解决办法：

1. popover演示效果

2. 解决办法如下

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

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

具体代码如下：

<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()}}