ElementUI 表格实现每行上传不同图片

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column label="Image">
      <template slot-scope="scope">
        <el-upload
          class="upload-demo"
          action="/upload"
          :file-list="scope.row.fileList"
          :on-success="handleSuccess"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-upload="beforeUpload"
          multiple
        >
          <el-button size="small" type="primary">Upload</el-button>
          <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 2MB</div>
        </el-upload>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John',
          fileList: []
        },
        {
          name: 'Jane',
          fileList: []
        },
        {
          name: 'Bob',
          fileList: []
        }
      ]
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // handle success
    },
    handlePreview(file) {
      // handle preview
    },
    handleRemove(file, fileList) {
      // handle remove
    },
    beforeUpload(file) {
      // before upload
    }
  }
}
</script>
<p>在这个示例中，我们在表格中添加了一个上传组件，并使用了 'scope.row.fileList' 来设置每行上传的图片。在 'handleSuccess'、'handlePreview'、'handleRemove' 和 'beforeUpload' 方法中，我们可以处理上传的图片。注意，在 'beforeUpload' 方法中，我们可以使用 'return false' 来阻止上传。</p>
<p>希望这个示例能够帮助你实现每行上传不同的图片。</p>