element-ui自定义点击删除按钮删除图片，el-uploa

<el-upload ref="child"
action="#"
:file-list="fileList"
list-type="picture-card"
:auto-upload="false">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file, fileList}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
<i class="el-icon-download"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>

  </span>
  </div>
</el-upload>

<script>
export default {
components: {},
data() {
return {
fileList:[],
dialogImageUrl: '',
dialogVisible: false,
disabled: false
};
},
mounted() {

},
methods: {

  handleRemove(file) {
   //  this.$refs.child.uploadFiles  子组件储存文件
    this.$refs.child.uploadFiles.forEach((v, index) => {
      if (file.name === v.name && file.url === v.url) {
        this.$refs.child.uploadFiles.splice(index, 1);
      }
    });
    console.log(this.$refs.child.uploadFiles);



  },
  handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url;
    this.dialogVisible = true;
  },
  handleDownload(file) {
    console.log(file);
  }



}

}

</script>