1、利用el-tabs标签，动态添加专利信息，以及图片

image

<!-- 动态添加专利 -->
<el-card class="box-card">
  <div slot="header" class="clearfix">
      <span>专利信息</span>
    </div>
    <el-tabs v-model="editableTabsValue" type="card" @edit="handleTabsEdit" @tab-click="click_tab(index)" addable>
      <el-tab-pane
        :key="index"
        v-for="(item, index) in editableTabs"
        :label="item.title"
        :name="item.name">
        <el-row>
          <el-col :span="8">
            <el-form-item label="标题" >
              <el-input v-model="zlTitle[index]" placeholder="请输入标题" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述">
              <el-input v-model="zlContent[index]" placeholder="请输入描述" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="width: 100%">
              <el-form-item label="上传专利" prop="checkinTime">
              <el-form :model="form">
                  <el-upload
                    ref="upload_zhuanli"
                    action="#"
                    accept="image/png,image/gif,image/jpg,image/jpeg"
                    list-type="picture-card"
                    :limit=7
                    :file-list="fileList_zhuanli[index]"
                    :before-upload="(file,fileList_zhuanli) => {
                      beforeAvatarUpload_zhuanli(file, fileList_zhuanli, index)
                    }"
                    :on-remove="(file,fileList) => {
                      handleRemove_zhuanli(file, fileList, index)
                    }"
                    :on-success="fileSuccess_zhuanli"
                    multiple>
                    <i class="el-icon-plus"></i>
                  </el-upload>
              </el-form>
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
</el-card>   

fileList_zhuanli:[],
zlTitle:[],
zlContent:[],

// 专利上传
beforeAvatarUpload_zhuanli(file, fileList, index) {
      
      var self = this;
      const isLt2M = file.size / 500 / 500 < 2;
      if (!isLt2M) {
        this.$alert('图片大小不能超过500KB', '提示', {
          confirmButtonText: '确定',
        });
        return false;
      }

      if(isLt2M){
        var imgRelationId_zhuanli = self.guid();
        if('' == self.imgRelationId_zhuanli[index] || null == self.imgRelationId_zhuanli[index]){
          self.imgRelationId_zhuanli[index] = imgRelationId_zhuanli;
        }
        let fd = new FormData();
        fd.append('file',file);//传文件
        fd.append('relationId',self.imgRelationId_zhuanli[index]);//传其他参数
        // 上传图片
        upload_img(fd).then(response => {
          var img={
            id : response.data.id, 
            url : response.data.url,
          };
          var imgArr = [];
          imgArr = self.fileList_zhuanli[index];

          if(undefined == imgArr || null == imgArr || "" == imgArr){
            imgArr = [];
            imgArr.push(img);
            self.$set(self.fileList_zhuanli,index,imgArr);
          }else if(imgArr.length > 0){
            self.$set(self.fileList_zhuanli, index, [...self.fileList_zhuanli[index], img])  
          }

        });
      }
      return isLt2M;
},

// 专利删除
handleRemove_zhuanli(file, fileList, index) {
  // 删除图片
  if(undefined != file.id && '' != file.id){
    delete_img(file.id).then(response => {
      this.fileList_zhuanli[index] = fileList;
    });
  }
},

注意：
使用es6匿名函数 调用上传方法，并传入当前tab标签页index
:before-upload="(file,fileList_zhuanli) => {
beforeAvatarUpload_zhuanli(file, fileList_zhuanli, index)
}"
这个写法是，在当面标签页图片基础上添加成功上传的图片
self.$set(self.fileList_zhuanli, index, [...self.fileList_zhuanli[index], img])