el-upload 自定义删除文件按钮

el-upload 是 Element UI 提供的文件上传组件，它可以方便地实现文件上传功能。要自定义删除文件按钮，可以通过 slot 来实现。

首先，在 el-upload 组件中添加一个名为 "default" 的 slot，用于自定义上传文件列表的展示。在该 slot 中，可以使用 v-for 指令遍历上传的文件列表，并为每个文件添加一个删除按钮。

具体代码如下：

<el-upload
  action="/upload"
  :on-success="handleSuccess"
  :file-list="fileList"
>
  <template #default="{ file, fileList }">
    <div class="file-item" v-for="(item, index) in fileList" :key="index">
      <span>{{ item.name }}</span>
      <el-button type="text" @click="handleDelete(index)">删除</el-button>
    </div>
  </template>
</el-upload>

在上述代码中，`fileList` 是一个数组，用于存储上传的文件列表。`handleSuccess` 是上传成功后的回调函数，你可以根据实际需求进行处理。

接下来，在 Vue 实例中定义 `handleDelete` 方法，用于删除文件。具体代码如下：

methods: {
  handleDelete(index) {
    this.fileList.splice(index, 1);
  },
  handleSuccess(response, file, fileList) {
    // 处理上传成功后的逻辑
  }
}

在 `handleDelete` 方法中，使用 `splice` 方法从 `fileList` 数组中删除指定索引的文件。

这样，你就可以自定义 el-upload 的删除文件按钮了。