elementui使用el-table中的el-popover,点击确定或者取消后关闭按钮弹窗

遇到的问题：
①、因为表格数据是循环展示的，导致点击后popover一次性出现多个，为保持popover的唯一性，需要给el-popover设置ref属性’popover-’ + scope.row.id 然后搭配el-popover的内置方法 doShow 并且trigger=“manual”。
②、弹出框弹出后不消失，el-popover的有内置方法 doClose ，通过引用popover对象然后调用doClose方法。

html:

<el-popoverplacement="bottom"width="160"trigger="manual":ref="'popover-' + scope.row.id"><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)">审核</el-button>
</el-popover>

js:

pSubmit(row) {store.postData(apiUrl.unbind_front_user_api,{user_id:row.id}).then((res)=>{if(res.body.code==1){this.pClose(row.id)}})
},
pCancel(id) {this.pClose(id)
},
pClose(id) {this.$refs[`popover-` + id].doClose()
},
pOpen(id){this.$refs[`popover-` + id].doShow()
}

elementui使用el-table中的el-popover,点击确定或者取消后关闭按钮弹窗相关推荐

使用VUE实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部
使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部 <template> <div> <table> <tr v-for="i ...
关于table中一个隐藏的tr，改为显示后与其他tr样式不一样的问题
问题:使用谷歌浏览器table中一个隐藏的tr,改为显示后与其他tr样式不一样的根据来源的选择,改变下面输入框的类型和数量,微信号格式与其他tr不一致.显示如下: 解决方案: display 属性的 ...
ISE软件中关于功能仿真点击Simulate Behavioral Model后出现的问题的其他情况及其解决办法
出现的问题点击Simulate Behavioral Model后提示以下错误: Model Technology's vsim executable cannot be found by Proj ...
Element-UI(一) 表格table中实现“加载更多”的功能
要实现这个功能,需要使用table slot这个属性 1.创建页面模板 <div class="cnd-table"><el-table :data=" ...
如何在elementUi动态表格table中翻译字典值。vue通用方案
实现思路: 先渲染动态行,然后在行里面添加slot插槽,写需要翻译字典的判断. vue的v-for 的子组件里面 v-if . 注意v-for与v-if不要写在同一标签内. 例子: <el-ta ...
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}} ...

elementui使用el-table中的el-popover,点击确定或者取消后关闭按钮弹窗

elementui使用el-table中的el-popover,点击确定或者取消后关闭按钮弹窗相关推荐

最新文章

热门文章