vue+element ui 关于表格中多行增加上传文件操作

先创建一个表格标签，表格中需要先写上上传文件的组件

<el-table
  :data="tableData"
  style="width: 100%"
  border
  >
  <el-table-column
    type="index"
    label="序号"
    width="50"
    align="center">
  </el-table-column>
  <el-table-column
    prop="materialName"
    label="材料名称"
    align="center"
    width="300"
  >
  </el-table-column>
  <el-table-column
    prop="isRequire"
    label="是否必填"
    align="center"
    width="100"
  >
    <template slot-scope="{row}">
    <span>{{row.isRequire == '0'?'否':'是'}}</span>
    </template>
  </el-table-column>
  <el-table-column
    prop="rentStatus"
    label="状态"
    align="center"
    width="100"
  >
    <template slot-scope="{row}">
    <span>{{row.rentStatus == '0'?'未上传':'已上传'}}</span>
    </template>
  </el-table-column>
  <el-table-column
    prop="name"
    label="操作"
    >
    <template slot-scope="scope">
    <!-- <span class="has-link">上传</span> -->
    
    <el-upload
      class="upload-demo"
      :action="uploadFileServiceUrl"
      :on-success="(response, file, fileList) => {handleSuccess(response, file, fileList,scope)}"
      :on-remove="(file, fileList) => {handleRemove(file, fileList,scope)}"
      :file-list="fileList"
      >
      <span class="has-link">上传</span>
    </el-upload>
    </template>
  </el-table-column>

</el-table>

在data中定义一个表格数组，数组中的fileIdList是我需要存储的信息，可自行参考

export default {
  name: "",
  data() {
    return {
      tableData: [{
        rentStatus:'0',
        isRequire:'1',
        materialName:'项目投资合同',
        fileIdList:[]
      }],
      fileList:[],
    }
  }
}

表格多行上传的难点在于，需要把上传的文件和表格中的行一一对应，所以在handleSuccess和handleRemove方法中多传入了一个scope，scope参数是自行封装的，需要与表格对应。

完整的方法代码：

export default {
  name: "",
  data() {
    return {
      tableData: [{
        rentStatus:'0',
        isRequire:'1',
        materialName:'项目投资合同',
        fileIdList:[]
      }],
      fileList:[],
    }
  },
  methods: {
    handleSuccess(response, file, fileList,scope){
      response.data.forEach((item,index) => {
        this.tableData[scope.$index].fileIdList.push(item.fileID)
        this.tableData[scope.$index].rentStatus = '1'
      })
    },
    handleRemove(file, fileList,scope){
      let index = scope.$index;
      this.tableData[scope.$index].fileIdList = []
      fileList.forEach((item,index) => {
        item.response.data.forEach((item,index) => {
          this.tableData[scope.$index].fileIdList.push(item.fileID)
        })
      })

      if(this.tableData[scope.$index].fileIdList.length == 0){
        this.tableData[scope.$index].rentStatus = '0'
      }
    },
  }
}

注意：handleSuccess钩子函数中，因为这里上传的是一张一张的上传，所以需要把上传成功以后返回的数据push到tableData中，而handleRemove钩子函数中，需要先把数据置空，然后再循环把需要的数据push进去，如果没有先置空的话，fileIdList中的数据会不断叠加，当然，也可以用splice的方法，把找到对应的文件数据删除掉。