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 模板循环上传文件的资料请关注脚本之家其它相关文章!
相关文章
基于electron+vue3+ts搭建桌面端应用并且可以热更新
这篇文章主要为大家详细介绍了如何基于electron+vue3+ts搭建桌面端应用并且可以热更新,文中的示例代码讲解详细,感兴趣的小伙伴可以参考下2023-10-10
element-ui中的clickoutside点击空白隐藏元素
这篇文章主要为大家介绍了element-ui中的clickoutside点击空白隐藏元素示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-03-03
vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())
这篇文章主要介绍了vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-04-04


最新评论