【elementui】el-popover在列表里循环使用,取消的doClose无效解决办法

目录

    • 一、需求效果
    • 二、代码详情
      • html
      • 方法
      • 接口

一、需求效果

在使用elementui的Popover 弹出框时,需求是在table列表里使用,循环出来,无法取消。
在这里插入图片描述
在这里插入图片描述

二、代码详情

html

 <el-table-column v-if="checkPermission(['admin','user:resetPass','user:edit','user:del'])" label="操作" width="200" align="center" fixed="right"><template slot-scope="scope"><el-popoverv-permission="['admin','user:resetPass']":ref="scope.row.id"placement="top"width="180"><p>确定重置密码吗?</p><div style="text-align: right; margin: 0"><el-button size="mini" type="text" @click="handleClick()">取消</el-button><el-button type="primary" size="mini" @click="subResetPass(scope.row)">确定</el-button></div><el-button slot="reference" type="primary" icon="el-icon-key" size="mini"/></el-popover><el-button v-permission="['admin','user:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/><el-popoverv-permission="['admin','user:del']":ref="scope.row.id"placement="top"width="180"><p>确定删除本条数据吗?</p><div style="text-align: right; margin: 0"><el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button><el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button></div><el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/></el-popover></template></el-table-column>

方法

    handleClick(val) {document.body.click()},
    subResetPass(row) {const params = { userId: row.id }resetPass(params).then(res => {this.$notify({title: '重置成功',message: '默认密码:123456',type: 'success',duration: 2500})document.body.click()}).catch(err => {document.body.click()console.log(err.response.data.message)})},

接口

export function resetPass(params) {return request({url: 'stbiapi/api/users/resetPass',method: 'get',params})
}

参考文章:el-popover在列表里循环使用,关闭不了???
el-popover 使用 doClose() 关闭窗口不生效
[Vue] element表格中使用el-popover弹窗编辑内容保存和取消的doClose无效解决办法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/166014.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】标准模板库STL作业(其二)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

C 语言文件读写

C 语言文件读写 在本教程中&#xff0c;您将学习如何在C语言中处理文件。您将通过示例学习在C语言中使用fprintf()、fscanf()、fread()、fwrite()、fseek()等处理标准I/O。 文件是计算机存储设备中用于存储数据的容器。 为什么需要文件&#xff1f; 当程序终止时&#xff0…

vue2,vue3使用vuex

vuex vue的状态管理器 1引入vuex npm install vuex2.创建store/index.js文件 在main.js引入 import { createStore } from vuexconst store createStore({state: () > ({})}) export default store3.state 核心, 用于定义数据 state: () > ({count: 0,name: 陆青,age:…

Py之wikipedia-api:wikipedia-api的简介、安装、使用方法之详细攻略

Py之wikipedia-api&#xff1a;wikipedia-api的简介、安装、使用方法之详细攻略 目录 wikipedia-api的简介 wikipedia-api的安装 wikipedia-api的使用方法 1、 创建 Wikipedia并进行查询 wikipedia-api的简介 Wikipedia-API是一个易于使用的Python封装&#xff0c;用于访…

计算机是如何执行指令的

计算机组成 现在所说的计算机基本上都是冯诺依曼体系的计算机。其核心原理&#xff1a; 冯诺依曼计算的核心思想是将程序指令和数据以二进制形式存储存储在同一存储器中&#xff0c;并使用相同的数据格式和处理方式来处理它们。这种存储程序的设计理念使得计算机能够以可编程…

如何从 C# 制作报表到 FastReport Cloud

众所周知&#xff0c;我们的世界在不断发展&#xff0c;新技术几乎每天都会出现。如今&#xff0c;不再需要在办公室内建立整个基础设施、雇用人员来监控设备、处理该设备出现的问题和其他困难。 如今&#xff0c;越来越多的服务提供业务云解决方案&#xff0c;例如FastReport…

合并PDF出现OOM异常

优化方法一&#xff1a;使用PdfSmartCopy类代替PdfCopy类。这个类可以在合并PDF文件时&#xff0c;检测并消除重复的对象&#xff0c;从而减少内存的占用。您可以参考以下代码示例&#xff1a; //创建一个Document对象 Document document new Document();//创建一个PdfSmartC…

SpringBoot 项目实现读写分离

SpringBoot 项目实现读写分离 一、读写分离介绍 当使用Spring Boot开发数据库应用时&#xff0c;读写分离是一种常见的优化策略。读写分离将读操作和写操作分别分配给不同的数据库实例&#xff0c;以提高系统的吞吐量和性能。 读写分离实现主要是通过动态数据源功能实现的&…

我的虚拟人物介绍

背景 大家好&#xff0c;我是小欣&#xff0c;是这个博客的虚拟助手。在这里&#xff0c;我将为大家提供各种有趣、实用、甚至是意想不到的信息。作为一个年轻的语言模型&#xff0c;我的目标是为你们呈现出最有趣和有深度的内容。 我喜欢与大家分享知识、解答问题&#xff0…

AI“胡说八道”?怎么解?

原创 | 文 BFT机器人 01 引言 近年来&#xff0c;人工智能产业迅猛发展&#xff0c;大型语言模型GPT-4发展势头强劲&#xff0c;OpenAI推出ChatGPT、微软推出Bing、马斯克推出“最好的聊天机器人Grok”……科技巨头纷纷入局AI领域&#xff0c;引入人工智能作为办公工具的行业…

合封芯片未来趋势如何?合封优势能否体现?

芯片已经成为现代电子设备的核心组件。为了提高系统的性能、稳定性和功耗效率&#xff0c;一种先进的芯片封装技术——合封芯片应运而生。 合封芯片作为一种先进的芯片封装技术&#xff0c;合封芯片是一种将多个芯片&#xff08;多样选择&#xff09;或不同的功能的电子元器件…

AIGC专题报告:生成式人工智能用例汇编

今天分享的是AIGC系列深度研究报告&#xff1a;《AIGC专题报告&#xff1a;生成式人工智能用例汇编》。 &#xff08;报告出品方&#xff1a;德勤&#xff09; 报告共计&#xff1a;16页 生成式人工智能&#xff08;AI&#xff09;的兴起 生成式AI给人类文明创造了无限的可…

文心一言 VS 讯飞星火 VS chatgpt (142)-- 算法导论12.1 2题

二、用go语言&#xff0c;二叉搜索树性质与最小堆性质(见 6.1 节)之间有什么不同?能使用最小堆性质在 O(n)时间内按序输出一棵有 n 个结点树的关键字吗?可以的话&#xff0c;请说明如何做&#xff0c;否则解释理由。 文心一言&#xff1a; 在二叉搜索树&#xff08;Binary …

如何更有效地进行薪酬调查?

薪酬调查是企业管理中非常重要的一环&#xff0c;它不仅能够帮助企业了解员工的薪酬情况&#xff0c;还可以为企业提供合理的薪酬标准&#xff0c;从而吸引和留住优秀人才。然而&#xff0c;进行薪酬调查并不是一项简单的任务&#xff0c;需要有一定的方法和技巧&#xff0c;许…

ruoyi 若依框架采用第三方登录

在项目中&#xff0c;前后端分离的若依项目&#xff0c;需要通过统一认证&#xff0c;或者是第三方协带认证信息跳转到本系统的指定页面。需要前后端都做相应的改造&#xff0c;由于第一次实现时已过了很久&#xff0c;再次重写时&#xff0c;发现还是搞了很长时间&#xff0c;…

PasteNow for mac剪贴板工具

PasteNow 是一款简单易用的剪贴板管理工具&#xff0c;可帮助用户快速存储和管理剪贴板上的文本和图片内容。用户可以使用 PasteNow 软件快速将文本内容保存到不同的笔记或页面中&#xff0c;也可以方便地将剪贴板上的图片保存到本地或分享给其他应用程序。 此外&#xff0c;P…

如何进行合理的股权激励?

股权激励是企业激励员工和管理层的一种重要手段&#xff0c;通过向员工提供股权&#xff0c;可以将他们与企业利益紧密联系在一起&#xff0c;激发员工的积极性和创造力&#xff0c;提高公司的绩效和竞争力。然而&#xff0c;要实施合理的股权激励&#xff0c;需要考虑多个因素…

vue 通过ref调用router-view子组件的方法

由于用的vue2.7版本&#xff0c;但用了vue3 setup的语法&#xff1b; 注意&#xff1a;是vue2的template结构&#xff0c;vue3的setup语法&#xff1b;非这种情况需要举一反三。 处理方案&#xff1a; 1、对router-view加上ref template修改 直接对router-view加上ref&#x…

金蝶云星空和四化智造MES(WEB)单据接口对接

金蝶云星空和四化智造MES&#xff08;WEB&#xff09;单据接口对接 对接系统&#xff1a;四化智造MES&#xff08;WEB&#xff09; MES系统是集成生产管理、品质管理、设备管理、BI数据中心、库存管理、工时管理、数据采集、看板管理等为一体的综合性生产管理系统。通过强调制造…

wagtail-安装配置

系列文章目录 文章目录 系列文章目录安装虚拟环境安装wagtail查看安装后的包 创建wagtail项目安装依赖迁移创建超级用户运行项目 安装虚拟环境 https://blog.csdn.net/gsl371/article/details/117917857 安装wagtail (wagenv) C:\djproject\wagprj>pip list Package V…