el-upload 文件列表点击

### 实现 `el-upload` 文件列表项点击事件

为了实现或自定义 `el-upload` 组件中文件列表项的点击事件，可以采用监听文件列表变化并动态绑定点击事件的方法。具体来说，在每次文件上传成功或者移除之后，通过 JavaScript 动态为每一个文件条目添加点击事件处理器。

#### 方法一：利用钩子函数处理文件列表更新后的操作

Element UI 提供了多个生命周期钩子来帮助开发者更好地控制组件的行为。其中 `on-preview`, `on-remove` 和 `http-request` 是常用的几个接口[^1]。然而这些默认提供的回调并不足以完全满足自定义需求，因此可以通过组合使用它们加上原生 DOM 操作达到目的：

<template>
  <div id="app">
    <el-upload
      action="#"
      :file-list="fileList"
      @change="handleChange"
    >
      <el-button size="small" type="primary">Click to upload</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList;
      setTimeout(() => { // 确保DOM已经更新完毕再执行后续逻辑
        const items = document.querySelectorAll('.el-upload-list__item');
        Array.from(items).forEach((item, index) => {
          item.addEventListener('click', () => handleItemClick(index));
        });
        
        function handleItemClick(idx){
            console.log(`Clicked on file at position ${idx}`);
            alert(`You clicked the file at position ${idx}.`);
        }
      }, 0);
    }
  }
};
</script>

这种方法的优点在于它能够灵活地响应任何类型的用户交互，并且可以根据实际业务场景调整触发的动作。不过需要注意的是，由于这里涉及到直接操纵DOM节点的操作，所以在某些情况下可能会破坏框架原有的封装特性，需谨慎评估其适用性和潜在风险。

#### 方法二：基于 scoped slot 的高级定制化方案

如果希望更加优雅地解决问题而不必触及底层DOM结构，则推荐尝试 Vue.js 中的 Scoped Slot 特性。这种方式允许父级组件向子组件传递额外的数据和插槽模板，从而获得更高的灵活性与可维护性:

<template>
  <div id="app">
    <el-upload
      ref="uploadRef"
      action="#"
      list-type="picture-card"
      :auto-upload="false"
      v-model:file-list="fileList"
    >
      <template #default="{ file }">
        <!-- 自定义文件卡片内容 -->
        <img class="el-upload-list__item-thumbnail" :src="file.url"/>
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-name">{{ file.name }}</span>
          <i class="el-icon-zoom-in"></i>
          <i class="el-icon-delete" @click.prevent="handleRemove(file)"></i>
          <el-button
            icon="el-icon-download"
            circle
            @click.stop="downloadFile(file)"
          ></el-button>
        </span>
      </template>
      
      <el-button slot="trigger" size="small" type="primary">Select File</el-button>
    </el-upload>
    
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt=""/>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "App",
  
  components: {},
  
  props: [],
  
  data(){
     return{
       dialogImageUrl:'',
       dialogVisible:false,
       fileList:[]
     }
  },

  mounted(){},
  
  computed:{},

  watch:{},
  
  methods:{
    downloadFile(file){
      window.open(file.url,'_blank')
    },
    
    handleRemove(file){
      this.$refs.uploadRef.handleRemove(file); 
    }
  }
}
</script>

此段代码展示了如何借助scoped slots来自定义文件预览区域内的元素布局以及关联相应的动作按钮。对于更复杂的交互设计而言，这无疑是一个更为理想的选择。