快捷導(dǎo)航

vue?模板循環(huán)繪制多行上傳文件功能實(shí)現(xiàn)

更新時(shí)間：2023年07月03日 11:20:15 作者：CUI_PING

這篇文章主要為大家介紹了vue?模板循環(huán)繪制多行上傳文件功能實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

循環(huán)繪制模板

我們?cè)谏蟼鞫鄠€(gè)文件時(shí)，循環(huán)繪制模板， el-upload 拿不到當(dāng)前操作的節(jié)點(diǎn) ，可以在其外層增加一個(gè)div 加上點(diǎn)擊事件，記下當(dāng)前操作節(jié)點(diǎn)，代碼如下

<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)繪制多行上傳文件功能實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于vue 模板循環(huán)上傳文件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

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