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

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

 <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;
      });
    },
  },
};

对于el-upload组件封装,可以按照以下步骤进行: 1. 创建一个自定义组件,可以命名为Upload.vue 或者其他你喜欢的名字。 2. 在该组件中,引入el-upload组件,并根据需要设置相应的属性和事件。 3. 在组件的模板中,使用el-upload组件,并传入相应的props和event。 4. 在父组件使用封装组件,并根据需要传递参数和处理事件。 以下是一个简单的el-upload组件封装的示例代码: ```vue <template> <div> <el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleSuccess" :on-error="handleError" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </div> </template> <script> export default { data() { return { uploadUrl: 'your_upload_url' }; }, methods: { handleBeforeUpload(file) { // 处理上传前的逻辑,例如限制文件类型、大小等 }, handleSuccess(response, file, fileList) { // 处理上传成功后的逻辑 console.log('上传成功', response); }, handleError(error, file, fileList) { // 处理上传失败后的逻辑 console.log('上传失败', error); } } }; </script> <style> /* 可以根据需要进行样式调整 */ </style> ``` 在父组件使用该自定义的Upload组件,可以像普通的组件一样引入并使用: ```vue <template> <div> <Upload></Upload> </div> </template> <script> import Upload from '@/components/Upload.vue'; export default { components: { Upload } }; </script> ``` 这样你就可以在父组件使用封装el-upload组件了。你可以根据自己的需求,进一步调整和扩展该封装组件的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

左手牵♪♡右手

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

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

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

打赏作者

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

抵扣说明:

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

余额充值