element ui表单中包含上传组件的动态添加

element 上传组件的动态添加

在开发后台管理系统的时候涉及到表单的动态添加，在表单中包含上传组件，其中遇到的问题及解决办法

问题

upload组件 file-list的动态绑定list1，list2 …，实现动态添加,

代码

议题内容

      <el-col :span="20">
        <el-form-item label="议题名称" :prop="'documentMeetingRecords.' + index + '.title'" :rules="{required: true, message: '议题名称不能为空', trigger: 'blur'}">
          <el-input placeholder="请输入议题名称" v-model="item.title" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item :prop="'documentMeetingRecords.' + index + '.status'">
          <el-checkbox true-label="1" false-label="2" v-model="item.status">是否选择</el-checkbox>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="拟上会时间" :prop="'documentMeetingRecords.' + index + '.applyTime'" :rules="{required: true, message: '拟上会时间不能为空', trigger: 'change'}">
          <el-date-picker placeholder="请选择时间" v-model="item.applyTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <!--  -->
        <el-form-item label="文件上传" :prop="'documentMeetingRecords.' + index + '.fileList'" style="text-align:left">
          <el-upload :action="uploadAction" :file-list="item.fileList" :on-preview="(file)=>{return filePreviewHandle(file,index)}" style="display:flex"
            :on-remove="(file, fileList)=>{return fileRemove(file, fileList, index)}" :on-success="(response, file, fileList)=>{return handleAvatarSuccess(response, file, fileList, index)}">
            <el-button>
              <i class="el-icon-upload2"></i>
              <span>立即上传</span>
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
    </div>
  </el-row>
  <div class="addIssues" @click="AddMeetingRecord()">+ 新增议题</div>

	在这里插入图片描述

上传方法

handleAvatarSuccess(res, file, fileList, idx) {
  this.inputForm.documentMeetingRecords[idx].fileList.push({
    uuid: res.uuid,
    name: res.fileName,
    filePath: res.path,
    realPath: res.realPath,
    fileindex: idx
  })
  this.inputForm.documentMeetingRecords.forEach((item, index) => {

    this.fileList = item.fileList
    let faieArr = item.fileList
  })
},
fileRemove(file, fileLists, idx) {
  console.log(file, fileLists, idx)
  let fileList = this.inputForm.documentMeetingRecords[idx].fileList
  fileList.forEach((item, index) => {
    if (file.name == item.name) {
      fileList.splice(index, 1)
    }
  })

回显