快捷導(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)繪制模板

我們在上傳多個(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)上傳文件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新
這篇文章主要為大家詳細(xì)介紹了如何基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考下
2023-10-10
vue2.0 axios跨域并渲染的問題解決方法
下面小編就為大家分享一篇vue2.0 axios跨域并渲染的問題解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue 清空input標(biāo)簽中file的值操作
這篇文章主要介紹了vue 清空input標(biāo)簽中file的值操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
element-ui中的clickoutside點(diǎn)擊空白隱藏元素
這篇文章主要為大家介紹了element-ui中的clickoutside點(diǎn)擊空白隱藏元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
Vuex3和Vuex4有哪些區(qū)別
本文主要介紹了Vuex3和Vuex4有哪些區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue 實(shí)現(xiàn)購物車總價(jià)計(jì)算
今天小編就為大家分享一篇vue 實(shí)現(xiàn)購物車總價(jià)計(jì)算，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
解決echarts圖表y軸數(shù)據(jù)間隔過大的問題
這篇文章主要介紹了解決echarts圖表y軸數(shù)據(jù)間隔過大的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue實(shí)現(xiàn)生成本地Json文件功能方式
這篇文章主要介紹了Vue實(shí)現(xiàn)生成本地Json文件功能方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue.js學(xué)習(xí)之過濾器詳解
過濾器，本質(zhì)上就是一個(gè)函數(shù)。其作用在于用戶輸入數(shù)據(jù)后，它能夠進(jìn)行處理，并返回一個(gè)數(shù)據(jù)結(jié)果。下面這篇文章主要給大家介紹了Vue.js中過濾器的相關(guān)資料,需要的朋友可以參考借鑒，一起來看看吧。
2017-01-01