element ui upload 组件缩略图上删除按钮的实现

element ui 的官网上 upload 组件缩略图上删除按钮并没有实现他的功能
他组件内是定义了一个 handleRemove 的删除事件，那么怎么实现呢
首先在upload 组件上给他一个 ref 属性

<el-upload
  action="#"
  ref='files'
  list-type="picture-card"
  :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <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>

然后再写handleRemove 事件方法

handleRemove(file) {
         // 获取到该组件调用handleRemove方法删除file对象
         this.$refs.files.handleRemove(file)
      },

这样就可以实现缩略图上的删除按钮了