在el-table中使用el-popover,没法点击确定或取消来关闭
事情的经过是这样婶的,肖哥最近接到产品的一个需求,见下图
在一个table里边点击解绑前端账号,左边弹出一个浮框,浮框里边需要两个操作按钮,肖哥根据以往丰富的写代码(搬砖)经验,熟练地打开element官方文档,把popover的代码熟练的搬了过来,三下五除二略加修改,本以为万事大吉,结果却是大相径庭。
官方文档中的popover只是针对的单个的情况,像table这种循环渲染popover的情况如果照搬会死的惨绝人寰:
遇到的第一个bug:点击按钮出来的不是一个而是一堆popover
出来了一堆,显然渲染的一揽子popover共用了很多变量,为了保持popover的 唯一性,需要给el-popover设置ref属性'popover-' + scope.row.id 然后搭配el-popover的内置方法 doShow 并且trigger="manual",其他种类 的trigger出了很多幺蛾子,无以言表! 复制代码
遇到的第二个bug:弹出框出来后点击取消按钮不管用
搭配el-popover的内置方法 doClose 通过引用popover对象然后调用doClose方法 自己动手,丰衣足食,能自己撸的串绝不麻烦别人,哼! 复制代码
送上核心代码
<el-popoverplacement="left"width="160"trigger="manual":ref="'popover-' + scope.row.id"><p style="text-align: center;margin: 15px 0px">确定解绑前端账号吗?</p><div style="text-align: center; margin: 0"><el-button size="mini" type="text" @click="pCancel(scope.row.id)">取消</el-button><el-button type="primary" size="mini" @click="pSubmit(scope.row)">确定</el-button></div><el-button type="primary" slot="reference" size="mini" @click="pOpen(scope.row.id)" v-if="scope.row.is_bind&&scope.row.bind_status==2">解绑前端账号</el-button></el-popover>复制代码
pSubmit(row) {store.postData(apiUrl.unbind_front_user_api,{user_id:row.id}).then((res)=>{if(res.body.code==1){this.pClose(row.id)this.fetchData()}})},pCancel(id) {this.pClose(id)},pClose(id) {this.$refs[`popover-` + id].doClose()},pOpen(id){this.$refs[`popover-` + id].doShow()}复制代码
转载于:https://juejin.im/post/5b7e6fb4f265da4369366a2a
在el-table中使用el-popover,没法点击确定或取消来关闭相关推荐
- 在el-table中使用el-popover,没法点击确定或取消来关闭添加 多个按钮
editFlag(id) { this.delLoading = true editFlag(id).then(res => { this.delLoading = false this.ref ...
- js去el的map_转:el表达式获取map对象的内容 js中使用el表达式 js 中使用jstl 实现 session.removeattribute...
原文链接: 总结: el表达式获取map对象的内容 后端: HashMap map1 = new HashMap(); map1.put("key1","lzsb&quo ...
- JSP中是EL表达式与JSTL
EL语法:${ } EL取值来自于作用域对象 1.如何从指定作用域取值(默认从最小作用域取值) pageScope.requestScope.sessionScope.applicationScope ...
- JSP中的EL表达式详细介绍
2019独角兽企业重金招聘Python工程师标准>>> 一.JSP EL语言定义 EL 提供了在 JSP 脚本编制元素范围外使用运行时表达式的功能.脚本编制元素是指页面中能够用于在 ...
- vue 中的el表达式_Vue中vue.filter()的使用方法介绍(过滤)
本篇文章给大家带来的内容是关于Vue中vue.filter()的使用方法介绍(过滤),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Vue过滤器 {{msg |msgFormat}} ...
- EL表达式中格式化日期显示
场景 在Jsp中通过EL表达式格式化显示日期. 实现 在jsp中引入标签: <%@ taglib prefix="fmt" uri="http://java.sun ...
- EL表达式中fn函数(转载)
EL表达式中fn函数 JSTL 使用表达式来简化页面的代码,这对一些标准的方法,例如bean的getter/setter方法,请求参数或者context以及 session中的数据的访问非常方便,但是 ...
- jsp页面中JSTL/EL标签引用java后台静态static字段的方法总结
转载自 jsp页面中JSTL/EL标签引用java后台静态static字段的方法总结 为什么使用该功能? 项目中的每个页面都包含产品名称.Logo.版本等信息,我希望修改一处,其它所有的全部跟着变 ...
- html中el表达式遍历list,EL表达式在JS中取出来打印[object HTMLDivElement]的问题
今天做项目的时候,要在JS中获取请求参数中的 值,想直接用 ${param.tabName}获取,结果console.debug()打印出来,居然是 [object HTMLDivElement] ...
最新文章
- RobotFramework下的http接口自动化Set Request Body 关键字的使用
- mysql的主从复制功能_Mysql的主从复制功能
- linux中创建本地yum库,轻松安装Linux软件
- CSS基础学习-8.CSS盒子模型_标准盒子9.CSS怪异盒子
- 【es6】谈谈Promise
- 一个html5页面,html5做一个黑板报页面
- SorterBot-第1部分
- html 圆球的百分比,HTML5 很酷的球形器皿中水波状的进度条
- js距离单位换算_英语中常用的度量衡等单位,与我们用的不一样,这些差异点快收藏...
- 2011计算机等级考试二级c语言公共基础教程.doc,2011年全国计算机等级考试二级c语言公共基础知识复习100题及答案.doc...
- springmvc的一些优化设置
- 在VS2010进行MFC编程设置字符集的问题(使用多字节字符集引起错误)
- php期末考卷,php试卷B高质量含答案
- 系统测试包含哪几部分?
- Ramda 函数库参考教程
- P3900 [湖南集训]图样图森破
- 重命名 VMware ESX 主机
- 强化学习的方法总结与分类
- 霍尼韦尔Granit 1990iSR工业二维码扫描枪
- 是谁拿走了哈萨克斯坦的油气收益?
热门文章
- 分享成为高效程序员的7个重要习惯
- LaTeX单栏和双栏设置
- C/C++ 中生成特定范围内的随机数
- OpenCV之core 模块. 核心功能(1)Mat - 基本图像容器 OpenCV如何扫描图像、利用查找表和计时 矩阵的掩码操作 使用OpenCV对两幅图像求和(求混合(blending))
- 百度前端fex-team团队面试指南
- TLD(Tracking-Learning-Detection)学习与源码理解之(五)
- 鸟哥的Linux私房菜(基础篇)- 第十八章、认识系统服务 (daemons)
- 鸟哥的Linux私房菜(基础篇)-第零章、计算机概论(零.2)
- 《大话数据结构》第9章 排序 9.4 简单选择排序
- macOS 中使用钥匙串保存密码