vue+element ui 关于表格中多行增加上传文件操作-Toy模板网

这篇具有很好参考价值的文章主要介绍了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的方法，把找到对应的文件数据删除掉。文章来源地址https://www.toymoban.com/news/detail-630051.html

到了这里，关于vue+element ui 关于表格中多行增加上传文件操作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！