使用el-upload封装得组件怎么清空已上传附件

这篇博客讲述了在项目中遇到的一个问题,即在附件上传组件中,如何实现在点击取消按钮时不调用接口并清空列表。作者通过设置`isRouterAlive`状态并在`nextTick`中操作,成功实现了附件列表的局部刷新,从而避免了组件报错。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近项目中一处附件上传,点击取消得时候要清空列表。因为本身附件上传组件已有删除,而这个取消按钮是不调用接口得。但是用组件属性就是会报错
,因此就让他局部刷新一下:
在这里插入图片描述

 <div class="file-info bdr10"
                   v-if="isRouterAlive">
                <!-- 1======课后作业            -->
                <upload-file-flex ref="upload"
                                  v-model="ruleForm.annex"
                                  @getFileList="getFileList"
                                  :accept="'.docx,.pdf'"
                                  :limit="1"></upload-file-flex>
              </div>
              <div class="text-center"
                   style="margin-top:10px">
                <el-button round
                           @click="removeFile"
                           size="mini">取消</el-button>
                <el-button type="primary"
                           size="mini"
                           :ldstatus="ldstatus"
                           style="background: #056AFF;"
                           @click="subMit"
                           round>保存</el-button>
              </div>
export default {
  name: "app",
  data() {
    return {
      isRouterAlive: true,
    };
  },
  provide() {
    return {
       removeFile: this.removeFile,
    };
  },
  methods: {
   removeFile () {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.ruleForm.annex = ''
        this.isRouterAlive = true;
      });
    },
  },
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

左手牵♪♡右手

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值