vue?模板循環(huán)繪制多行上傳文件功能實現
更新時間:2023年07月03日 11:20:15 作者:CUI_PING
這篇文章主要為大家介紹了vue?模板循環(huán)繪制多行上傳文件功能實現詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
循環(huán)繪制模板
我們在上傳多個文件時, 循環(huán)繪制模板, el-upload 拿不到當前操作的節(jié)點 , 可以在其外層增加一個div 加上點擊事件,記下當前操作節(jié)點, 代碼如下
<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 模板循環(huán)繪制多行上傳文件功能實現的詳細內容,更多關于vue 模板循環(huán)上傳文件的資料請關注腳本之家其它相關文章!
相關文章
基于electron+vue3+ts搭建桌面端應用并且可以熱更新
這篇文章主要為大家詳細介紹了如何基于electron+vue3+ts搭建桌面端應用并且可以熱更新,文中的示例代碼講解詳細,感興趣的小伙伴可以參考下2023-10-10element-ui中的clickoutside點擊空白隱藏元素
這篇文章主要為大家介紹了element-ui中的clickoutside點擊空白隱藏元素示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03vue路由跳轉打開新窗口(window.open())和關閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉打開新窗口(window.open())和關閉窗口(window.close())問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04