前端列表页+element-puls实现列表数据弹窗功能

news2025/1/6 18:48:40

效果图:

 这是一个修改的弹窗,我们要实现的功能是,在列表,点击修改按钮时,将数据带入到弹窗里面,点击保存时关闭弹窗。

1,点击修改展开弹窗

 使用 eldialog组件,v-model绑定的值为true时,打开弹窗,组件里我放的时自己写的组件,用来做数据的展示,这里我们将可以写一个函数,绑定在修改按钮上,这个函数用来处理dialogtablevisible变量,首先,这个变量的初始值是flase,当点击修改按钮时,将变量修改为true,即可实现打开功能。

 2,点击取消关闭按钮

        这里需要用到emit方法,通过el-dialo里的子组件,点击传值,我们将传递的值在父组件中执行一个新的函数,这个函数是将dialogtablevisible变量修改为flase,这样就实现了点击取消时关闭弹窗,

        子组件:

                

 

        父组件:

                

 

3,将列表页的数据传入到子组件里,作为编辑的初始值

父组件传递:

       

子组件接收并渲染:

 

 这里要注意下,我们要用watch监听props数据,当每次数据更新时,在watch里面监听更新,并重新赋值,不然会出现当我们点击第二个列表数据时,数据不正确的情况。

完结,,撒花 

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

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

相关文章

fluent-operator在kubesphere中的实战详解

前言 最近收到一个小任务:熟悉kubesphere实现一个日志平台。基于这样的机会,将最近所整理的笔记进行汇总。 kubesphere开启日志收集 根据官网介绍只需要将 enabled 的 false 改为 true即可 执行kubectl get pod -n kubesphere-logging-system命令来检查…

QT课程 QT介绍

QT介绍(了解) Qt是一个基于C开发语言的图形用户界面开发(GUI)框架。界面开发知识Qt的一部分,实际上Qt也可以支持很多其他的功能,比如:网络编程、文件IO、图形图像处理等。 Qt在嵌入式领域最大…

Vue之插值表达式,v-bind(单向绑定),v-model(双向绑定)

文章目录 前言一、插值表达式二、v-bind指令三、v-model指令总结 前言 插值表达式{{…}} v-bind v-model 一、插值表达式 插值表达式支持匿名变量、三目运算符、四则运算符、比较运算符、数值类型的一些内置方法&#xff0c;还有数组的索引取值方法和对象属性。 <!DOCTYPE…

安全工具 | CMSeeK [指纹识别]

0x00 免责声明 本文仅限于学习讨论与技术知识的分享&#xff0c;不得违反当地国家的法律法规。对于传播、利用文章中提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;本文作者不为此承担任何责任&#xff0c;一旦造成后果请自行承担…

2023年北京.NET线下技术沙龙圆满落幕!

5月20日&#xff0c;MASA技术团队在北京举办的“2023年北京.NET线下技术沙龙”圆满落幕&#xff01;整个活动气氛热烈&#xff0c;嘉宾们的分享内容丰富多彩&#xff0c;现场观众都受益匪浅。我们期待着更多这样的技术交流活动&#xff0c;让.NET社区不断发展和进步。 本次活动…

材料电磁参数综合测试解决方案 材料吸波、屏蔽性能测试系统 (10MHz~500GHz)

材料吸波、屏蔽性能测试系统测试频率范围可达10MHz&#xff5e;500GHz&#xff0c;可实现材料反射率、屏蔽性能特性参数测试。系统由矢量网络分析仪、测试夹具、系统软件等组成&#xff0c;根据用户不同频率、材料性能测试需求&#xff0c;可选用弓形框法、便携式反射率测试法进…

如何快速实现接口自动化测试,常规接口断言封装实践

目录 前言&#xff1a; 一、框架设计思路 1. 封装请求方法 2. 断言封装 3. 接口封装 4. 接口统一管理 二、框架使用 三、总结 前言&#xff1a; 在当今互联网行业中&#xff0c;接口自动化测试已经成为了非常重要的测试手段之一。而在这个过程中&#xff0c;接口自动化…

3年外包裸辞,面试阿里、字节全都一面挂,哭死.....

测试员可以先在外包积累经验&#xff0c;以后去大厂就很容易&#xff0c;基本不会被卡&#xff0c;事实果真如此吗&#xff1f;但是在我身上却是给了我很大一巴掌... 所谓今年今天履历只是不卡简历而已&#xff0c;如果面试答得稀烂&#xff0c;人家根本不会要你。况且要不是大…

性能优化 面试

性能分析 1.页面加载性能&#xff08;加载时间&#xff1b;用户体验&#xff09; 2.动画与操作性能&#xff08;是否流畅无卡顿&#xff09; 3.内存占用&#xff08;内存占用过大&#xff0c;浏览器崩掉等&#xff09; 4.电量消耗&#xff08;游戏方面&#xff0c;暂不考虑&…

【SpringBoot】九:Web服务---文件上传

文章目录 1.MultipartFile API2.上传文件 1.MultipartFile API 在 Controller 的方法加入形参RequestParam MultipartFile。 MultipartFile 表示上传的文件&#xff0c;提供了方便的方法&#xff0c;保存文件到磁盘。 方法作用getName()参数名称&#xff08;upfile&#xff0…

pymongo给文档里的某个列表添加元素并去重以及操作符的表格

文章目录 问题描述知识点收集mongo的操作符:匹配符&#xff1a;选择符&#xff1a;函数操作&#xff1a;更新符&#xff1a;聚集符&#xff1a;字段操作符&#xff1a; 问题描述 给parts列表新增字典 新增前: 新增后: 代码: mongo_client get_mongo_client()col mongo_cli…

【ZYNQ】ZYNQ7000 UART 控制器及驱动示例

简介 UART 控制器介绍 UART 控制器是一个全双工异步收发控制器&#xff0c;ZYNQ 内部包含两个 UART 控制器&#xff0c;UART0 和 UART1。每一个 UART 控制器支持可编程的波特率发生器、64 字节的接收 FIFO 和发送 FIFO、产生中断、RXD 和 TXD 信号的环回模式设置以及可配置的…

第一个SpringBoot程序

如何创建一个SpringBoot项目&#xff0c;两种方式&#xff0c;官网或IDEA 官方提供了一个快速生成的网站&#xff0c;IDE集成了这个网站 spring官网 Spring | Homehttps://spring.io/进入spring官网&#xff0c;点击projects&#xff0c;点击SpringBoot&#xff0c;进到如下…

前端设计必须知道!7个超实用的工具推荐!

前端网络开发作为一个高薪行业&#xff0c;近年来的繁荣是业内人士所看到的。网络开发工具也在上升&#xff0c;市场上出现了越来越多的前端页面设计工具。但随着前端页面设计工具数量的增加&#xff0c;找到合适的前端页面设计工具来完成工作有时会让开发团队感到困惑。 本文…

看不上的年金险

前言 像我这种“资深”股民&#xff0c;激进的有股票期货&#xff0c;稳健的有国债、政策性金融债、地方政府债、城投债&#xff0c;中间的还有etf、宽基指数、指增基金&#xff0c;平时因为对冲风险买点保障性保险也就罢了&#xff0c;储蓄型的保险压根看不上。 但现在通过熬…

Golang语言初识

Windows 下搭建 Go 开发环境-安装和配置 SDK 采用文章 2.5.1介绍了 SDK SDK 的全称(Software Development Kit 软件开发工具包)SDK 是提供给开发人员使用的&#xff0c;其中包含了对应开发语言的工具包 2.5.2下载 SDK 工具包 1) Go 语言的官网为&#xff1a;golang.org , 因…

基于单片机的步进电机驱动电路设计

基于单片机的步进电机驱动电路设计 步进电机在控制系统中具有广泛的应用。它可以把脉冲信号转换成角位移&#xff0c;并且可用作电磁制动轮、电磁差分器、或角位移发生器等。 有时从一些旧设备上拆下的步进电机(这种电机一般没有损坏)要改作它用&#xff0c;一般需自己设计驱动…

Flask 设置头像及创建帖子模型类

我们经常在一些网站上看到&#xff0c;在用户没有自定义头像的情况下&#xff0c;会给每个用户都生成一个头像&#xff0c;这让网站显得更美观&#xff0c;那这个是怎么实现的呢&#xff1f;在Flask中有一个插件&#xff0c;叫做Flask-avatars&#xff0c;专门提供头像解决方案…

UNIX网络编程卷一 学习笔记 第十五章 Unix域协议

本书中&#xff0c;作者说Unix域数据报套接字是不可靠的&#xff0c;这一说法已经过时&#xff0c;当前大多实现中&#xff0c;Unix域套接字都是可靠的&#xff0c;不论是数据报套接字还是字节流套接字。 Unix域协议不是一个实际的协议族&#xff0c;而是单个主机上执行客户/服…

人员定位及轨迹管理技术原理及应用领域

人员定位及轨迹管理的实现涉及多种技术和设备。例如&#xff0c;在GPS定位方面&#xff0c;使用卫星系统可以提供全球范围内的准确定位信息。然而&#xff0c;GPS在室内环境下的信号覆盖可能存在限制&#xff0c;因此在室内定位应用中&#xff0c;常常采用无线传感器网络&#…