获取el-disable弹框 中,el-upload对象,并清空列表,始终无法获取到ref的原因

   <!-- 添加或修改服务器管理对话框 --><el-dialog :title="title" v-model="open" width="800px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="100px"><el-form-item label-position="right" label="上传图片" prop="text"><el-uploadref="uploadPictureModel" :file-list="form.pictureShow":action="baseURL+uploadPath":headers="uploadHeader"show-file-list:limit="1":on-exceed="handleExceed":on-success="setPicture":on-remove="handleRemove":before-upload="checkFileType"list-type="picture"><el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button><div class="el-upload__tip">只能上传不超过 2MB 的图片</div></el-upload></el-form-item><el-form-item label-position="right" label="上传视频" prop="text"><el-upload ref="uploadVideoModel" :file-list="form.videoShow":action="baseURL+uploadPath":headers="uploadHeader"show-file-listaccept="video/*":limit="1":before-upload="checkFileSize":on-exceed="handleExceed":on-success="setPictureVideoShow":on-remove="handleRemove"><el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button><div class="el-upload__tip">只能上传不超过 10MB 的视频</div></el-upload></el-form-item><el-form-item label="文案" prop="advertisingCopy" label-width="100"><editor v-model="form.advertisingCopy" show-word-limit :max-length="2000" :min-height="192"/></el-form-item></el-form><div class="dialog-footer"><el-button type="primary" :loading="isLoading" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>

以上是弹框内容,但是如果弹框的open 为false 那么就会导致无法获取ref属性。
所以如果想要清空el-uplload上传列表,需要将el-disable弹框显示出来后也就是open=true的时候,再去通过 this.$refs.uploadVideoModel.clearFiles();去清空上传列表。
代码如下:点击新增的时候清空

  /** 新增按钮操作 */handleAdd() {this.reset();this.form={}this.open = true;this.$refs.uploadPictureModel.clearFiles();this.$refs.uploadVideoModel.clearFiles();this.title = "添加知识科普";},

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

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

相关文章

如何用UI自动化测试实现元素定位

随着IT行业的发展&#xff0c;产品愈渐复杂&#xff0c;web端业务及流程更加繁琐&#xff0c;目前UI测试仅是针对单一页面&#xff0c;操作量大。为了满足多页面功能及流程的需求及节省工时&#xff0c;设计了这款UI 自动化测试程序。旨在提供接口&#xff0c;集成到蜗牛自动化…

nacos配置导出

1.查看nacos数据库 mysql -u root -p use nacos show tables; 其中config_info就是存放nacos配置的表&#xff0c;导出该表中的数据就是导出nacos中的配置项 mysqldump -u root -p --single-transaction nacos config_info>config_info.sql 导出后在需要的nacos集群的…

我记不住的那些vim操作2

背景&#xff1a;最近在重新学习vi/vim&#xff0c;发现这个编辑器的用法真是太灵活了&#xff0c;所能掌控的也太多了&#xff0c;这次学习了一些之前没有学习过的内容&#xff0c;之前都是移动鼠标、编辑、复制、粘贴、保存等等(点我查看)&#xff0c;本次将介绍 标签、区域、…

【Python基础】生成器

文章目录 [toc]什么是生成器生成器示例生成器工作流程生成器表达式send()方法和close方法send()方法close()方法 什么是生成器 在Python中&#xff0c;使用生成器可以很方便地支持迭代器协议生成器通过生成器函数产生&#xff0c;通过def定义&#xff0c;但不是通过return返回…

亚马逊云科技re:Invent推出生成式AI技术堆栈及关键服务和工具

亚马逊云科技于29日推出“生成式AI技术堆栈”后&#xff0c;又在30日的re:Invent 2023大会上宣布了一系列支持这一全新堆栈的关键服务和工具。 亚马逊云科技数据和人工智能副总裁Swami Sivasubramanian在主题演讲中&#xff0c;将生成式人工智能与“超新星爆炸”进行了比较&am…

Python计算圆的面积,几何学技法大解析!

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是彭涛&#xff0c;今天为大家分享 Python计算圆的面积&#xff0c;几何学技法大解析&#xff0c;全文3800字&#xff0c;阅读大约15分钟。 在本文中&#xff0c;将深入探讨如何使用 Python 计算圆的面积&…

如何在断线后不重连加入音视频房间

RTC 房间断网后&#xff0c;默认是一直尝试重连的&#xff0c;例如当主播再次联网重连成功后&#xff0c;会自动发布之前在发布的音视频流。针对某些不想断网后重新加入连接的场景&#xff0c;需要如下配置&#xff1a; 1、配置断开后不去重连&#xff08;这种情况也会重连 4 次…

css画饼图

<template slot-scope"scope"> <div class"pie" :style"{--p: scope.row.rate}" style"--p:10;--b:10px;--c:#FFAB79;"> <!-- --p&#xff1a;这个变量应该包含百分比值作为一个数字&#xff08;不带%符号&#xff09;…

深入理解Python装饰器:丰富函数功能的强大工具

导语&#xff1a;装饰器是Python非常强大的功能之一&#xff0c;它们允许程序员修改或增强已有函数或方法的行为&#xff0c;而无需更改其本身的代码&#xff0c;这篇文章&#xff0c;让我们一起来看看&#xff08;我自己这里理解的也不是很透彻&#xff09; ----------更正---…

ansible远程操作主机功能和自动化运维

ansible 两个功能&#xff1a;1、远程操作主机功能 2、自动化运维&#xff08;play 剧本 yaml&#xff09; 简述&#xff1a; 是基于python开发的配置管理和应用部署工具。在自动化运维中&#xff0c;现在是异军突起。 Asible能批量配置&#xff0c;部署&#xff0c;管理上千…

162. 寻找峰值 --力扣 --JAVA

题目 峰值元素是指其值严格大于左右相邻值的元素。 给你一个整数数组 nums&#xff0c;找到峰值元素并返回其索引。数组可能包含多个峰值&#xff0c;在这种情况下&#xff0c;返回 任何一个峰值 所在位置即可。 你可以假设 nums[-1] nums[n] -∞ 。 你必须实现时间复杂度为 …

【从零开始学习JAVA集合 | 第一篇】深入解读HashMap源码(含面试题)

目录 目录 前言&#xff1a; HashMap简介&#xff1a; HashMap的常用常量和变量&#xff1a; HashMap的重要考点&#xff1a; HashMap的存储过程&#xff1a; HashMap的扩容过程&#xff1a; HashMap的初始化&#xff1a; 常见面试题&#xff1a; 总结&#xff1a;…

RDB 和 AOF 的实现原理和优缺点

RDB 和 AOF 的实现原理和优缺点 RDB和AOF是Redis的两个持久化方式。 RDB RDB(Redis DataBase)是Redis的一种数据持久化方式&#xff0c;即快照方式。Redis通过fork出一个子进程来将内存中的数据写入磁盘。在保存快照期间&#xff0c;Redis主进程会被阻塞。 RDB的优点在于&a…

最大公约数(greatest common divisor, gcd)与最小公倍数(least common multiple, lcm)。

不严谨但好理解直观的说法&#xff1a; 1.公约数和最大公约数 几个数公有的约数,叫做这几个数的公约数&#xff1b;其中最大的一个,叫做这几个数的最大公约数. 例如&#xff1a;12的约数有&#xff1a;1,2,3,4,6,12&#xff1b; 18的约数有&#xff1a;1,2,3,6,9,18. 12和18的…

js操作相关方法

1.split split 是 JavaScript 字符串对象的一个方法&#xff0c;用于将字符串分割成子字符串&#xff0c;并返回一个由这些子字符串组成的数组。你可以使用 split 方法根据指定的分隔符将字符串分割成多个部分。 以下是 split 方法的示例用法,使用 split 方法将字符串 str 根…

AI摄影绘画与PS优化:重塑数字艺术的未来

文章目录 《AI摄影绘画与PS优化从入门到精通》内容简介作者简介楚天 目录前言/序言 在科技日新月异的今天&#xff0c;人工智能&#xff08;AI&#xff09;已经渗透到我们生活的各个领域&#xff0c;包括艺术创作。AI摄影绘画和Photoshop&#xff08;PS&#xff09;优化是这个领…

<sa8650>sa8650 qcxser-之-串行解串器GPIO的map

<sa8650>sa8650 qcxser-之-串行解串器GPIO输入输出 <sa8650>sa8650 qcxser-之-串行解串器GPIO的map <sa8650>sa8650 qcxser-之-串行解串器ERRB的map <sa8650>sa8650 qcxser-之-串行解串器ADC使用 <sa8650>sa8650 qcxser-之-串行解串器GPIO的map 一 串行解串器GPIO的m…

Linux常用命令-vi

**Vi&#xff08;Vim&#xff09;常用命令** 1. **插入模式**&#xff1a; - i&#xff1a;在当前光标位置前插入文本 - I&#xff1a;在当前行的开头插入文本 - a&#xff1a;在当前光标位置后插入文本 - A&#xff1a;在当前行的末尾插入文本 - o&#xff1a;在当前行下面插…

「Verilog学习笔记」交通灯

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule triffic_light(input rst_n, //异位复位信号&#xff0c;低电平有效input clk, //时钟信号input pass_request,output wire[7:0]clock,output reg…

Android ViewPager最简单使用

首先&#xff0c;ViewPager已经被淘汰了&#xff0c;目前应该使用ViewPager2。我之所以看这个是有某种原因。 事由&#xff1a; 在网上看到很多关于ViewPager的文章&#xff0c;但是大多数都结合了一些其他的东西&#xff0c;比如shape、Selector&#xff0c;让我这种小白看得…