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

<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的方法,把找到对应的文件数据删除掉。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐