关于vue.js:vue-模板循环绘制多行上传文件功能

40次阅读

共计 774 个字符,预计需要花费 2 分钟才能阅读完成。

咱们在上传多个文件时,循环绘制模板,el-upload 拿不到以后操作的节点,能够在其外层减少一个 div 加上点击事件,记下以后操作节点,代码如下

<el-form-item 
    :label="val.label+':'"v-for="(val, key, index) of orther_license_info":key="key + '_'+index":prop="key">
    
      <el-col :span="8">
         <el-input
          type="text"
          readonly
          v-model="conf[key]"
          ></el-input>
      </el-col>
      
      <el-col offset="1" :span="7">
        <div  @click="fileDivClick(key)">
          <el-upload
            :on-change="fileChange"
            :show-file-list="false"
            :auto-upload="false"
            :accept="key!=='otherQualification'?'image/jpeg,image/png':'image/jpeg,.zip'"
            >
            <el-button slot="trigger" type="primary" style="width: 83px" >{{val.sltFlg?"已抉择":"抉择文件"}}</el-button>

            <el-button class="margin-left-10" type="primary" @click="uploadFile(key)"> 上传文件 </el-button>
          </el-upload>

        </div>
         
      </el-col>
    </el-form-item>

事件

 fileDivClick(curKey){this.curKey = curKey},

    fileChange(file, fileList) {}

正文完
 0