vue 模板循环绘制多行上传文件功能实现
更新时间:2023年07月03日 11:20:15 作者:CUI_PING
这篇文章主要为大家介绍了vue 模板循环绘制多行上传文件功能实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
循环绘制模板
我们在上传多个文件时, 循环绘制模板, 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) { }
以上就是vue 模板循环绘制多行上传文件功能实现的详细内容,更多关于vue 模板循环上传文件的资料请关注脚本之家其它相关文章!
相关文章
vue2+elementui上传照片方式(el-upload超简单)
这篇文章主要介绍了vue2+elementui上传照片方式(el-upload超简单),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03elementUI checkBox报错Cannot read property &ap
这篇文章主要为大家介绍了elementUI checkBox报错Cannot read property 'length' of undefined的解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-06-06
最新评论