vue使用elementui组件的的对话框;使用ref

 1.第一步,先在父组件中引用,设置ref的值

<el-dialog :visible.sync="dialogEditVisible"append-to-body width="1000px" title="编辑":close-on-click-modal="false"><dialog-edit v-if="dialogEditVisible" ref="dialogEdit":visible.sync="dialogEditVisible" />
</el-dialog>

 2.引入和注册组件:

import DialogEdit from './edit'
export default {components: { Pagination,DialogAdd,DialogEdit,DialogView},

3.需要再data中设置对话框默认不打开:

 dialogEditVisible: false,

4.在父组件中mothod中实现调用对话框的方法:

handleEdit(scope) {this.dialogEditVisible = truethis.$nextTick(() => {//this.$refs.dialogEditthis.$refs.dialogEdit.getDetailed()})},

5.创建一个vue组件,名字为edit.vue,并且在method中添加getDetailed()   ,这个方法:

getDetailed() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getInfo({ code: this.proid }).then(response => {
        this.form = response.data.mdProjectInfo,
        loading.close()
      }).catch(function() {
        loading.close()
      })
    },

<template><div style="width:100%;height:auto; margin:0 auto;"><el-form :model="form" label-width="100px" label-position="left"><el-row :gutter="20"><el-col :span="16"><el-form-item><!-- <div slot="label">项目名称<font color="red">*</font></div>           <el-select v-model="form.dirId" clearable style="width:100%;" @change="selectGoodsByGroupId($event)"><el-option v-for="item in symbols" :key="item.id" :label="item.name" :value="item.id" /></el-select> --></el-form-item></el-col><el-col :span="8"><el-form-item><div slot="label">问题标题<font color="red">*</font></div><el-input v-model="form.name" placeholder="问题标题" /></el-form-item></el-col></el-row><el-row :gutter="20"><el-col :span="8"><el-form-item><div slot="label">问题类型<font color="red">*</font></div><el-input v-model="form.staffId" placeholder="问题类型" /></el-form-item></el-col>  <el-col :span="8"><el-form-item><div slot="label">优先级<font color="red">*</font></div><el-input v-model="form.staffId" placeholder="优先级" /></el-form-item></el-col><el-col :span="8"><el-form-item><div slot="label">问题状态<font color="red">*</font></div><el-input v-model="form.staffId" placeholder="问题状态" /></el-form-item></el-col></el-row><el-form-item label="内容"><el-input v-model="form.content" type="textarea" :autosize="{ minRows: 3, maxRows: 6}" /></el-form-item><el-form-item label="备注"><el-input v-model="form.message" type="textarea" :autosize="{ minRows: 3, maxRows: 6}" /></el-form-item></el-form><div style="text-align:center;"><el-button type="primary" @click="save()">保存</el-button><el-button type="danger" @click="closePage">取消</el-button></div></div>
</template>
<script>import { saveData,getInfo,edit} from '@/api/records'import { getAllList } from '@/api/maApplicationInfo'
import { Message } from 'element-ui'export default {inject: ['getList'],props: { // 第二种方式proid: {type: String,required: true}},data() {return {form: {},types: [],symbols: []}},created() {     this.getproject()},methods: {getDetailed() {const loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'})getInfo({ code: this.proid }).then(response => {this.form = response.data.mdProjectInfo,loading.close()}).catch(function() {loading.close()})},getproject(){getAllList().then(response=> {this.symbols = response.data})},selectGoodsByGroupId(val) { // 根据设备组id获取相应的商品if (val != null && val !== '' && val !== undefined) {for (var i = 0; i < this.symbols.length; i++) {if (this.symbols[i].id === val) {this.form.userId = this.symbols[i].customerMid}}}},save(){this.form.startTime = this.form.itemTime[0]this.form.endTime = this.form.itemTime[1]const loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'})edit(this.form).then(response => {Message({message: '编辑成功',type: 'success',duration: 5 * 1000})this.$emit('update:visible', false)loading.close()this.getList()}).catch(response => {loading.close()this.getList()})},closePage() {this.$emit('update:visible', false)}}
}
</script>

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

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

相关文章

【漏洞预警】Linux kernel权限提升漏洞(CVE-2024-1086)

一、漏洞概述 漏洞名称 Linux kernel权限提升漏洞 CVE ID CVE-2024-1086 漏洞类型 Use-After-Free 发现时间 2024-03-28 漏洞评分 7.8 漏洞等级 高危 攻击向量 本地 所需权限 低 利用难度 低 用户交互 无 PoC/EXP 已公开 在野利用 未知 Netfilte…

静态数码管

文章目录 前言一、静态数码管原理二、静态数码管显示1.单个数码管 奇数偶数2.显示任意四位数 0000-9999 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 课程需要&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考…

HarmonyOs开发之———容器组件使用

谢谢关注!! 前言:上一篇文章主要介绍HarmonyOS 开发之———基础组件的使用。如需了解谢谢查阅:http://t.csdnimg.cn/frBpp 一、在HarmonyOS中,不同的容器组件拥有各自的属性,用于控制布局和组件的展示方式。以下是Stack(堆栈)、Column(列)、Row(行)、Flex(弹性…

DFMEA的输入与输出——SunFMEA软件

DFMEA泛应用于产品设计阶段&#xff0c;以识别潜在的失效模式&#xff0c;评估其对系统的影响&#xff0c;并制定相应的预防措施。DFMEA的输入与输出是这一过程中至关重要的两个环节&#xff0c;它们直接决定了分析的质量与效果。今天SunFMEA软件系统和大家一起分享DFMEA的输入…

飞书API(3):Python 自动读取多维表所有分页数据的三种方法

上一小节介绍了怎么使用 Python 读取多维表的数据&#xff0c;看似可以成功获取到了所有的数据&#xff0c;但是在实际生产使用过程中&#xff0c;我们会发现&#xff0c;上一小节的代码并不能获取到所有的多维表数据&#xff0c;它只能获取一页&#xff0c;默认是第一页。因为…

C++事件聚合器

事件聚合器&#xff08;Event Aggregator&#xff09;允许不同的组件订阅和发布事件&#xff0c;而不需要知道事件的发布者和订阅者是谁&#xff0c;模块可在不直接相互引用的情况下通信&#xff0c;实现模块间的松耦合。事件聚合器常用于C#语言中&#xff0c;以下为C语言的简单…

棋牌室计时吧台计费收费灯控管理系统软件操作流程

棋牌室计时吧台计费收费灯控管理系统软件操作流程 一、前言 以下软件操作教程以&#xff0c;佳易王棋牌桌球计时计费管理系统软件灯控版V17.87为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 该计时计费软件可以是棋牌和桌球混合同时计时计费 …

JS--demo实现随机点名

逻辑就是通过点击事件得到数组里面的随机一个值&#xff0c;再把这个值给删除&#xff0c;当数组长度为1的时候&#xff0c;停止点名&#xff0c;用disabled属性让用户不能进行点击。 <!DOCTYPE html> <html lang"en"><head><meta charset&quo…

双数列-力扣-打家劫舍2

一个专业的小偷&#xff0c;计划偷窃一个环形街道上沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 &#xff0c;这意味着第一个房屋和最后一个房屋是紧挨着的。同时&#xff0c;相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的…

ESB总线集成方案:优劣势的深度解析

在信息化时代&#xff0c;企业面临着业务快速扩展、系统日益复杂、数据交互需求不断增加的挑战。为了有效整合各种资源&#xff0c;优化业务流程&#xff0c;提高运营效率&#xff0c;企业服务总线&#xff08;ESB&#xff09;集成方案应运而生。本文将详细探讨ESB总线集成方案…

day13 模块与包

一.模块 ```python 什么是模块? 模块:就是一个python文件 当python文件作为一个模块的时候,文件名就是模块名,demo1.py (demo1就是模块名) 作用: 可以调用其他python文件的代码,功能,可以更灵活的实现和使用了,添加很多各种效果 变量 = 存储一个/多个数据 函数 = 存储一句…

Android匿名共享内存(Ashmem)

在Android中我们熟知的IPC方式有Socket、文件、ContentProvider、Binder、共享内存。其中共享内存的效率最高&#xff0c;可以做到0拷贝&#xff0c;在跨进程进行大数据传输&#xff0c;日志收集等场景下非常有用。共享内存是Linux自带的一种IPC机制&#xff0c;Android直接使用…

基于单片机体温心率检测仪系统设计

**单片机设计介绍&#xff0c; 基于单片机体温心率检测仪系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机体温心率检测仪系统设计是一个综合性的项目&#xff0c;旨在通过单片机及其外围电路实现对人体体温和心…

山寨windows

我的目标是能够运行windows 下的大部分PE格式的程序&#xff0c;这一点通过实验已经证明完全是可行的。 PE格式主要有exe dll sys等文件&#xff0c;这三个文件可以用相同的函数解析&#xff0c; 主要有以下段组成&#xff0c; 1、文件头&#xff0c;包含DOS文件头、PE文件头…

Android 11 上的文件读写无权限问题

Android 6以上需要动态申请读写权限&#xff0c;但是11以上动态申请了读写权限也是无效。并且手动给予权限没有该按钮。 如上图华为钱包有个所有文件权限、但是百度地图只有仅媒体权限&#xff0c;仅媒体权限&#xff08;动态申请读写权限&#xff09;给予后软件还是没法访问文…

DSOX3034T是德科技DSOX3034T示波器

181/2461/8938产品概述&#xff1a; 特点: 带宽:350 MHz频道:4存储深度:4 Mpts采样速率:5 GSa/s更新速率:每秒1000000个波形波形数学和FFT自动探测接口用于连接、存储设备和打印的USB主机和设备端口 触摸: 8.5英寸电容式触摸屏专为触摸界面设计 发现: 业界最快的无损波形更…

10分钟上手:MySQL8的Json格式字段使用总结干货

一、关于效率和适用范围 尽管官方承诺Json格式字段采用了空间换时间的策略&#xff0c;比Text类型来存储Json有大幅度的效率提升。但是Json格式的处理过程仍然效率不及传统关系表&#xff0c;所以什么时候用Json格式字段尤为重要。 只有我们确定系统已经能精确定位到某一行&am…

Mysql主键优化之页分裂与页合并

主键设计原则 满足业务需求的情况下&#xff0c;尽量降低主键的长度。因为如果主键太长&#xff0c;在多个二级索引中&#xff0c;主键索引值所占用的空间就会过大。 插入数据时&#xff0c;尽量选择顺序插入&#xff0c;选择使用AUTO_INCREMENT自增主键。因为乱序插入会导致页…

[C++][异常]详解

目录 1.C语言传统的处理错误的方式2.C异常概念3.异常的抛出和捕获4.异常的重新抛出5.异常安全6.异常规范7.自定义异常体系8.C标准库的异常体系9.异常的优缺点1.C异常的优点2.C异常的缺点3.总结 1.C语言传统的处理错误的方式 传统的错误处理机制 终止程序&#xff0c;如assert …

Pillow教程:对比两张图片是否相同

---------------Pillow教程集合--------------- Python项目18&#xff1a;使用Pillow模块&#xff0c;随机生成4位数的图片验证码 Python教程93&#xff1a;初识Pillow模块&#xff08;创建Image对象查看属性图片的保存与缩放&#xff09; Pillow教程02&#xff1a;图片的裁…