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 模板循环上传文件的资料请关注脚本之家其它相关文章!

相关文章

  • Vue数据驱动模拟实现4

    Vue数据驱动模拟实现4

    这篇文章主要介绍了Vue数据驱动模拟实现的相关资料,介绍了Array的变异方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • vue使用swiper实现中间大两边小的轮播图效果

    vue使用swiper实现中间大两边小的轮播图效果

    这篇文章主要介绍了vue使用swiper实现中间大两边小的轮播图效果,本文分步骤通过实例代码讲解的非常详细,需要的朋友可以参考下
    2019-11-11
  • Vue3 <script setup lang=“ts“> 的基本使用

    Vue3 <script setup lang=“ts“> 的基本使用

    <script setup> 是在单文件组件 (SFC) 中使用 composition api 的编译时语法糖,本文主要讲解<script setup> 与 TypeScript 的基本使用,感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • vue3动态路由刷新出现空白页的原因与最优解

    vue3动态路由刷新出现空白页的原因与最优解

    页面刷新白屏其实是因为vuex引起的,由于刷新页面vuex数据会丢失,这篇文章主要给大家介绍了关于vue3动态路由刷新出现空白页的原因与最优解的相关资料,需要的朋友可以参考下
    2023-11-11
  • vue导出excel的两种实现方式代码

    vue导出excel的两种实现方式代码

    这篇文章主要给大家介绍了关于vue导出excel的两种实现方式,在项目中我们可能会碰到导出Excel文件的需求,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-08-08
  • 如何在vue里面优雅的解决跨域(路由冲突问题)

    如何在vue里面优雅的解决跨域(路由冲突问题)

    这篇文章主要介绍了如何在vue里面优雅的解决跨域(路由冲突问题),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue中为什么要引入render函数的实现

    Vue中为什么要引入render函数的实现

    本文主要介绍了Vue中为什么要引入render函数的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue实现div可拖动位置也可改变盒子大小的原理

    vue实现div可拖动位置也可改变盒子大小的原理

    这篇文章主要介绍了vue实现div可拖动位置也可改变盒子大小,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • Vue js 的生命周期(看了就懂)(推荐)

    Vue js 的生命周期(看了就懂)(推荐)

    这篇文章主要介绍了Vue js生命周期,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue两种组件类型:递归组件和动态组件的用法

    Vue两种组件类型:递归组件和动态组件的用法

    这篇文章主要介绍了Vue两种组件类型:递归组件和动态组件的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论