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

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

vue结合Element UI如何实现点击左侧菜单的折叠与展开
一.Element UI 中菜单的折叠与展开在Element UI中的官方文档中,在NavMenu 导航菜单中,在Menu Attribute 中,有一个 collapse 属性.它的作用是是否水平 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
解决 element ui 本地使用引入图标不显示 .ttf和.woff 报错问题
解决 element ui 引入在线地址更换为本地地址后 .ttf和.woff 报错问题原因因为文件内缺少两个文件根据控制台提示发现少了.ttf和.woff两个文件 1)element-ico ...
解决AssetBundle包加载预制体时，Shader显示异常的问题
解决AssetBundle包加载预制体时,Shader显示异常的问题参考文章: (1)解决AssetBundle包加载预制体时,Shader显示异常的问题 (2)https://www.cnblog ...
点击input时，不显示边框！
点击input时,不显示边框! ① input{ outline: none; } ②:focus 伪类选择器 ① input{ outline: none; } 鼠标点击input时,出显的黑 ...
vue 电梯导航制作（鼠标滚动控制导航栏的显示与隐藏）
鼠标滚动控制导航栏的显示与隐藏上图先看效果: 下面为2张图,默认为导航栏,当鼠标向下滚动一定距离时,变为箭头, 并且点击黄色的返回图标,也变为下方箭头,此时再滚动窗口,不会变为导航栏. 点击下方箭头 ...

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

1. popover演示效果

2. 解决办法如下

3. 在确认按钮和取消按钮中做回调操作

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

最新文章

热门文章