element 表格里,每一行都循环使用el-popover组件,关闭按钮失效问题如何解决?

 

 

 具体代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>.item:hover {color: #ff8040;}</style><script src="https://cdn.jsdelivr.net/npm/vue@2"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head><body><div id="app"><el-table :data="tableData" border style="width: 50%"><el-table-column fixed prop="date" label="日期" width="150"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="province" label="省份" width="120"><template slot-scope="scope"><div v-for="(item1,index1) in scope.row.children" :key="index1"><el-popover placement="top" width="160" :ref="`popover-${scope.$index}${index1}`"><p>这是一段内容这是一段内容确定删除吗?</p><div style="text-align: right; margin: 0"><el-button size="mini" type="text" @click="cancel(`popover-${scope.$index}${index1}`,item1)">取消</el-button><el-button type="primary" size="mini" @click="confirm(`popover-${scope.$index}${index1}`,item1)">确定</el-button></div><div slot="reference" class="item">{{item1}}点击弹窗</div></el-popover></div></template></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table></div><script>var vm = new Vue({el: '#app',data: function () {return {visible: false,tableData: [{"id": 45,"children": [5,5,5],},{"id": 50,"children": [35,2],},{"id": 51,"children": [7,3],},{"id": 53,"children": [4,3],},{"id": 55,"children": [2,5,1,5],},{"id": 57,"children": [2,3],},]}},methods: {cancel(e, item1) {let arr = this.$refs[e]//这边不太清楚为什么获取到的节点会是一个数组集合,索性直接循环一遍,每一个都执行doClose关闭弹窗方法arr.forEach((item, index) => {this.$refs[e][index].doClose()});},confirm(e, item1) {let arr = this.$refs[e]arr.forEach((item, index) => {this.$refs[e][index].doClose()});console.log(item1);},handleClick(row) {console.log(row);}},})</script>
</body></html>

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

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

相关文章

解决了项目中几个比较搞心态的bug(前端vue、小程序)

1、keep-alive 正常keep-alive的使用便可以做项目的缓存&#xff0c;但是我们的项目很不正常 项目是属于动态缓存&#xff0c;动态缓存有一个弊端 举个栗子&#xff1a; a组件为设置了需要缓存的页面&#xff1b; b组件为设置了需要缓存的页面&#xff1b; c组件为设置了不需…

资源成本降低70%!华为MetaERP资产核算的Serverless架构实践

资产核算是指在一定的财务周期&#xff0c;对企业拥有的房屋建筑物、机器设备、商标权和专利权等资产的取得、折旧和处置的会计核算&#xff0c;反映企业固定资产、无形资产的增减变动和价值分摊活动。华为资产核算产品&#xff0c;支撑企业资产从获取到处置全生命周期的管理和…

速锐得智能汽车车身域CANFD控制芯片MCU接口电路原理图

CAN总线技术不仅涉及汽车电子和轨道交通&#xff0c;还涉及医疗器械、工业控制、智能家居和机器人网络互连&#xff0c;这些行业对CAN产品的稳定性和抗干扰能力都有很高的要求。 上篇我们讲了在汽车CAN FD上&#xff0c;数据出错可能导致数据位被错误地解析为填充位&#xff0c…

MyBatis源码剖析之二级缓存细节

MyBatis是一个流行的Java持久化框架&#xff0c;它提供了许多功能&#xff0c;包括支持一级缓存和二级缓存。 一级缓存是默认开启的&#xff0c;它是在SqlSession层面的缓存。在同一个SqlSession中&#xff0c;如果执行了相同的SQL语句&#xff0c;那么第二次执行将从缓存中获取…

求整数中的最大值

才用打擂台的形式&#xff0c;先放一个数max在擂台上&#xff0c;然后每个数都上去和他比较&#xff0c;如果上去的那个数比max大&#xff0c;那么就把max替换成那个数站在擂台上&#xff0c;依次比较&#xff0c;直到所有数都比较完后&#xff0c;站在擂台上的那个max就是最大…

2023年深圳杯数学建模C题无人机协同避障航迹规划

2023年深圳杯数学建模 C题 无人机协同避障航迹规划 原题再现&#xff1a; 平面上A、B两个无人机站分别位于半径为500 m的障碍圆两边直径的延长线上&#xff0c;A站距离圆心1 km&#xff0c;B站距离圆心3.5 km。两架无人机分别从A、B两站同时出发&#xff0c;以恒定速率10 m/s…

玩转ChatGPT:Custom instructions (vol. 1)

一、写在前面 据说GPT-4又被削了&#xff0c;前几天让TA改代码&#xff0c;来来回回好几次才成功。 可以看到之前3小时25条的限制&#xff0c;现在改成了3小时50条&#xff0c;可不可以理解为&#xff1a;以前一个指令能完成的任务&#xff0c;现在得两条指令&#xff1f; 可…

Hadoop优化

1.Datanode管理多块数据盘 1.理解 其实就是扩展Datanode空间,之前一个盘,现在加一个盘或者多个盘, 2.优点: 1.提高容错(避免硬盘损坏全部数据丢失)2.实现数据分离模式存储(框架本体与数据分离,集群出现问题数据可进行单独恢复,这样也是提高容错) 3.配置&#xff08;临时挂…

认识雪花id

首先,个人理解,雪花id不是全球的,它只能保证一个分布式服务的范围内的ID是不重复的. 一.SnowFlake 雪花算法 SnowFlake 中文意思为雪花&#xff0c;故称为雪花算法。最早是 Twitter 公司在其内部用于分布式环境下生成唯一 ID。在2014年开源 scala 语言版本。 雪花算法的原理…

SpringBoot实战(二十三)集成 SkyWalking

目录 一、简介二、拉取镜像并部署1.拉取镜像2.运行skywalking-oap容器3.运行skywalking-ui容器4.访问页面 三、下载解压 agent1.下载2.解压 四、创建 skywalking-demo 项目1.Maven依赖2.application.yml3.DemoController.java 五、构建启动脚本1.startup.bat2.执行启动脚本3.发…

uniapp 微信小程序 预览pdf方法

效果图&#xff1a; 1、在小程序中 // #ifdef MP */ 是区分运行的环境&#xff0c;在小程序中可使用如下方法uni.downloadFile({url: item.link,//文件地址success: function (res) {var filePath res.tempFilePath;uni.openDocument({filePath: filePath,showMenu: false…

多线程面试题--线程池

目录 介绍 线程池的核心参数/执行原理 核心参数 执行原理​编辑 常见的阻塞队列 ArrayBlockingQueue和LinkedBlockingQueue区别 如何确定核心线程数 线程池的种类有哪些 创建使用固定线程数的线程池 单线程化的线程池 可缓存线程池 “延迟”和“周期执行”的线程池 总…

理光310/320/325系列激光打印机加粉后不换芯片清零方法

设置步骤&#xff1a; 依次按停止107开始键进入维修模式&#xff0c; 按下键两次选择Engine Maintenance,点OK键进入&#xff0c; 按上键选择Refill mode项后点OK键&#xff0c; 按下键选择到Pure refill mode后点Ok键(默认是Auto refill mode)&#xff0c; 然后按两次后退…

【MySQL】索引是什么东东?

书中的目录&#xff0c;就是充当索引的角色&#xff0c;方便我们快速查找书中的内容&#xff0c;所以索引是以空间换时间的设计思想。 索引和数据位于存储引擎中&#xff0c;MySQL默认的存储引擎是InnoDB。 1 为什么MySQL采用B树作为索引&#xff1f; 1.1 其他数据结构为什么…

PostgreSQL--实现数据库备份恢复详细教学

前言 这是我在这个网站整理的笔记&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;RodmaChen PostgreSQL--实现数据库备份恢复详细教学 一. 数据库备份二. 数据库恢复三. 存留问题 数据库备份恢复功能是每个产品所需的&#xff0c;以下是简单的脚本案例&a…

3-Linux实操

Linux实践操作 开关机、重启、用户登陆注销关机&重启用户登陆和注销 用户管理添加用户修改用户密码删除用户查询用户信息切换用户查看当前用户用户组的添加和删除用户和组相关文件 实用指令指定运行级别init 命令帮助指令文件目录类时间日期类搜索查找类&#x1f50d;压缩和…

Java获取调用当前方法的方法名和行数(亲测可行)

有时候一个方法被很多方法调用了&#xff0c;但是在调试应用程序的时候&#xff0c;需要知道是哪个方法调用它的&#xff0c;方便定位bug问题。否者&#xff0c;比较难以理清和解决一些bug问题。 适用&#xff1a;任何适用java语言编程的地方&#xff0c;java后端和android端。…

实用人工智能 2.0,在线“学习、探索和构建”ML 模型

人工智能爱好者过去需要在一个好的GPU上投资数千美元才能“动手”进行机器学习&#xff0c;但现在一个简单的网络浏览器就足够了。总部位于硅谷的非营利组织PracticalAI最近发布了“PracticalAI2.0”&#xff0c;该平台包括TensorFlow 2.0Keras中的说明性机器学习课程&#xff…

嵌入式管理程序

在功能强大的计算机中使用虚拟机管理程序的想法是众所周知的。它有利于同时使用多个操作系统&#xff0c;并提供了可以在其中部署未修改的旧版软件的虚拟化环境。虚拟机管理程序在现代嵌入式系统中也占有一席之地。本文考虑了嵌入式管理程序的特性&#xff0c;它可以提供的功能…

【计算机网络】2.1——物理层(编码波形、奈氏准则和香农公式计算)

物理层 基本概念 概念 物理层考虑的是怎样才能在连接各种计算机的传输媒体上传输数据比特流 为数据链路层屏蔽了各种传输媒体的差异 数据链路层只需要考虑如何完成本层的协议和服务&#xff0c;而不必考虑网络具体的传输媒体是什么 物理层协议主要任务 机械特性 指明接口所…