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

java 复制代码
   <!-- 添加或修改服务器管理对话框 -->
    <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-upload
              ref="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-list
                     accept="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();去清空上传列表。

代码如下:点击新增的时候清空

java 复制代码
  /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.form={}
      this.open = true;
      this.$refs.uploadPictureModel.clearFiles();
      this.$refs.uploadVideoModel.clearFiles();
      this.title = "添加知识科普";
    },
相关推荐
FungLeo5 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构
ruanno_top8 小时前
选中一项后,焦点掉回了页面顶部:三个弹层的焦点还原
vue.js
tryCbest11 小时前
Vue3——第 17 篇:模板引用(ref)与组件实例——操作 DOM 的正确姿势
vue.js·前端搭建
头发还在的女程序员12 小时前
Java在线租房系统源码解析:Spring Boot+Vue 3+UniApp房源管理与预约看房方案
java·vue.js·spring boot·租房小程序·租房系统·租房软件
FYKJ_201012 小时前
springboot同人周边订单管理系统48955-计算机毕业设计、课程设计
java·javascript·vue.js·spring boot·django·php·课程设计
梯度下降者21 小时前
Nuxt框架
vue.js·服务端渲染·全栈开发·混合渲染·nuxt框架
yuyuxun11 天前
协同过滤的校园二手物品智能推荐系统的设计与实现 毕业设计-附源码40082
javascript·vue.js·spring boot·python·数据分析·django·课程设计
FungLeo1 天前
成为全栈·Vue 管理后台篇·编辑器图片上传:从文件选择到文章附件关联
前端·vue.js·编辑器·markdown·文件上传·formdata·附件管理
码云社区1 天前
智慧物业系统选型指南:房屋档案、账单管理与报修协作
前端·javascript·vue.js·智慧物业
ruanno_top2 天前
表单重置后,验证码还显示已通过:Vue 受控组件的 3 种假同步
vue.js