element ui拖拽附件组件（删除文件）

好的，以下是一个基于 Element UI 的拖拽附件组件的实现，同时支持删除文件：

<template>
  <div class="drop-area" :class="{'dragging': isDragging}" @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
    <p v-if="files.length === 0 && !isDragging">将文件拖到此区域上传</p>
    <div class="file-list" v-else>
      <el-tag v-for="(file, index) in files" :key="index" closable @close="removeFile(index)">
        {{ file.name }}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      files: []
    };
  },
  methods: {
    onDragOver(event) {
      this.isDragging = true;
    },
    onDragLeave(event) {
      this.isDragging = false;
    },
    onDrop(event) {
      this.isDragging = false;

      const files = event.dataTransfer.files;
      if (files.length > 0) {
        this.addFiles(files);
      }
    },
    addFiles(files) {
      // 添加每一个文件
      for (const file of files) {
        this.files.push(file);
      }
    },
    removeFile(index) {
      this.files.splice(index, 1);
    }
  }
};
</script>

<style>
.drop-area {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}
.dragging {
  background-color: #f0f0f0;
}
.file-list {
  margin-top: 10px;
}
</style>

上述代码中，我们使用 Element UI 的 `el-tag` 组件来显示上传的文件列表，并且支持删除文件。在 `addFiles` 方法中，我们通过 `this.files.push(file)` 来添加每一个文件。在 `removeFile` 方法中，我们使用 `this.files.splice(index, 1)` 来删除指定位置的文件。你可以根据具体需求来对 `addFiles` 和 `removeFile` 方法进行修改，比如上传文件或从服务器删除文件。

同时，我们在组件中使用了 CSS 样式来设置拖放区域的边框和背景色，以及文件列表的样式。你可以根据具体需求来修改样式。