vue3 el-table每行上传文件

您想要实现在 el-table 的每一行中上传文件，需要在 el-table 的列中添加一个自定义的列，用于上传文件。具体实现步骤如下：

1. 在 el-table 的 columns 中添加自定义列，例如：

<el-table :data="tableData" :columns="columns">
  <template #upload>
    <el-upload
      class="upload-demo"
      :action="uploadUrl"
      :show-file-list="false"
      :on-success="handleUploadSuccess"
    >
      <el-button size="mini" type="primary">上传文件</el-button>
    </el-upload>
  </template>
</el-table>

注意，这里使用了 template 标签，并指定了 #upload 作为该模板的名称。

2. 在 el-table 的 columns 中，添加一个自定义的列，例如：

columns: [
  {
    label: '姓名',
    prop: 'name',
  },
  {
    label: '年龄',
    prop: 'age',
  },
  {
    label: '上传文件',
    align: 'center',
    width: 120,
    template: '#upload',
  },
],

这里需要注意的是，在自定义列中，我们使用了 template 属性，并指定为之前定义的模板名称 #upload。

3. 在 el-table 的数据中，添加一个上传文件的属性，例如：

tableData: [
  {
    name: '张三',
    age: 18,
    file: {},
  },
  {
    name: '李四',
    age: 20,
    file: {},
  },
],

这里添加的 file 属性就是用于保存上传的文件对象。

4. 在 handleUploadSuccess 方法中，将上传成功的文件对象保存到对应的数据中，例如：

handleUploadSuccess(response, file, fileList) {
  const index = this.tableData.findIndex(item => item.name === file.name);
  this.tableData[index].file = file;
},

这里通过文件名查找到对应的数据项，然后将上传的文件对象保存到该数据项的 file 属性中。

通过以上步骤，就可以实现在 el-table 的每一行中上传文件的功能了。