vue+element列表中每一项使用一次el-upload后，单独删除该项的数据时，列表中所有的el-upload的图片被清空

Question

el-upload组件代码：

<template>

  <el-upload
    class="avatar-uploader"
    :class="{avatarUploaderMimi:size == 'mini', disabled:fileList.length >= (imageCount?imageCount:1)}"
    :action="uploadUrl"
    :file-list="fileList"
    :ref="refUpload"
    name="file"
    list-type="picture-card"
    :on-change="handleChange"
    :on-remove="handleRemove">
    <div class="avatar-uploader-center">
      <i class="el-icon-plus avatar-uploader-icon"></i>

      <div class="el-upload__tip" v-show="text">{{text}}</div>
    </div>

  </el-upload>

</template>　

<script>

import Config from '@/common/js/config';

/**
 * @param imageUrl : [{url:''}]
 * @param imageCount : 上传数量
 * @param text
 * @returns arr
 */

export default {
  name: 'uploadImg',

  props: ['imageUrl', 'imageCount', 'text' , 'size','refUpload'],

  data() {
    return {
      uploadUrl:'',
      fileList:[],
    };
  },

  created() {
    this.uploadUrl = Config.uploadUrl;
    if(this.imageUrl == '' || this.imageUrl == undefined || this.imageUrl == null){
      this.fileList = [];
    }
    if(this.imageUrl && this.imageUrl.length > 0){
      if(this.imageUrl[0].url == '' || this.imageUrl[0].url == null || this.imageUrl[0].url == undefined){
        this.fileList = [];
      }else {
        this.fileList = this.imageUrl;
      }
    }

  },

  methods: {
    imgRemove(){
      console.log(this.$refs);
      this.$refs[this.refUpload].clearFiles();
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },

    handleRemove(file, fileList) {
      this.fileList = fileList;
    },

    beforeAvatarUpload(file) {

      const isJPEG = file.type === 'image/jpeg';
      const isJPG = file.type === 'image/jpg';
      const isPNG = file.type === 'image/png';
      const isGIF = file.type === 'image/gif';
      const isLt2M = file.size / 1024  < 512;

      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过512k!');
      }
       return (isJPG || isJPEG || isPNG || isGIF) && isLt2M;
    },


    // 返回图片在服务器的URL
    getUploadImage(){
      let imgUrl;
      this.fileList.map(item => {
        if(item.response){
          imgUrl = item.response.data;
        }else {
          imgUrl = item.url;
        }
      });
      return imgUrl;
    },


  }

}

</script>

<style>

  .avatar-uploader .el-upload {
    line-height: inherit;
  }

  .avatar-uploader .el-icon-close-tip{
    opacity: 0;
  }

  .avatar-uploader .el-upload,
  .avatar-uploader .el-upload-list__item{
    width: 100px !important;;
    height: 100px !important;;
  }

  .avatarUploaderMimi .el-upload,
  .avatarUploaderMimi .el-upload-list__item{
    width: 50px !important;;
    height: 50px !important;;
  }


  .avatar-uploader.disabled .el-upload--picture-card {
    display: none;
  }

  .avatar-uploader-center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
  }

</style>

父组件调用代码

<div class="input-wrap" v-for="(item,index) in skuList" :key="RndNum(8)">
                  <upload-img ref="skuImgList" :ref-upload="'refUpload' + RndNum(4)" :image-count="uploadCount" size="mini" class="sku-img"></upload-img>

<div class="input-wrap">
<span style="color: blue;cursor: pointer;" @click="removeSku(item,index)">删除</span>
</div>
</div>


script=============
removeSku(item, index) {
        this.$refs.skuImgList[index].imgRemove();
        this.skuList.splice(index, 1);
      },

删除前===========================

删除后============================

我尝试过给子组件加v-if显示隐藏，不行，也尝试过把el-upload拿出来直接用然后把列表内每一项加一个fileList来使用也不行，实在是搞不懂了。
求大神指教！

Answer 1

请问最后怎么解决了