vue?模板循環(huán)繪制多行上傳文件功能實現(xiàn)
更新時間：2023年07月03日 11:20:15 作者：CUI_PING
這篇文章主要為大家介紹了vue?模板循環(huán)繪制多行上傳文件功能實現(xià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)繪制多行上傳文件功能實現(xiàn)的詳細內容，更多關于vue 模板循環(huán)上傳文件的資料請關注腳本之家其它相關文章！
相關文章
在現(xiàn)代前端開發(fā)中懶加載是一種提高應用性能和用戶體驗的重要技術,尤其是在處理較大圖片或長列表數(shù)據(jù)時,這篇文章主要介紹了前端vue3實現(xiàn)圖片懶加載的相關資料,需要的朋友可以參考下2025-06-06
vue3 vite ant deign vue黑暗模式實現(xiàn)過程
該文章介紹了如何通過CSS變量和全局CSS文件實現(xiàn)黑暗模式,主要內容包括：創(chuàng)建`dark.less`和`light.less`文件對應黑暗和白天模式,使用CSS變量替換原有數(shù)值,編寫切換CSS函數(shù)及切換黑暗/白天模式的函數(shù),使用此方法,只需調用切換函數(shù)即可實現(xiàn)模式切換2026-04-04
詳細講解如何創(chuàng)建, 發(fā)布自己的 Vue UI 組件庫
當我們自己開發(fā)了一個 _UI Component_, 需要在多個項目中使用的時候呢? 我們首先想到的可能是直接復制一份過去對嗎?我們?yōu)槭裁床话l(fā)布一個 UI 組件庫給自己用呢?下面小編和大家來一起學習下吧2019-05-05
vue的rules驗證失效,部分可以部分又失效,很多百度都有,但是我這里遇到了一個特別的,那就是prop沒有寫全,導致驗證某一個失效,接下來就跟小編一起來看看這個失效的原因和解決方案吧2023-11-11
Vue3使用Univer Docs創(chuàng)建在線編輯Excel的示例代碼
本文介紹了如何在Vue3項目中集成UniverDocs,一個基于Luckysheet的企業(yè)文檔與數(shù)據(jù)協(xié)同解決方案,指導了從安裝到在頁面中使用的步驟,以及注意事項,如數(shù)據(jù)格式轉換和二次開發(fā)的靈活性,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了vue滑動吸頂及錨點定位的示例代碼,代碼簡單易懂，非常不錯對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
vue甘特圖vxe-gantt實現(xiàn)點擊任務條彈出編輯表單效果
本文將介紹如何使用 vxe-gantt 組件實現(xiàn)點擊任務條彈出編輯表單的功能,支持對任務的名稱、時間、進度、負責人、圖片附件等信息進行編輯,感興趣的朋友跟隨小編一起看看吧2026-03-03
Vue.js是構建Web界面的漸進式JavaScript框架,通過簡潔的 API 提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng),這篇文章主要給大家介紹了關于Vue.js中讓人容易忽略的API的相關資料,需要的朋友可以參考下2021-09-09
vue實現(xiàn)頁面渲染時候執(zhí)行某需求的示例代碼
本文主要介紹了vue實現(xiàn)頁面渲染時候執(zhí)行某需求,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-05-05
本文主要介紹了vue中Props與Attrs的實現(xiàn)實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-09-09