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

相关文章

  • vue2+elementui上传照片方式(el-upload超简单)

    vue2+elementui上传照片方式(el-upload超简单)

    这篇文章主要介绍了vue2+elementui上传照片方式(el-upload超简单),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3中markRaw示例详解

    vue3中markRaw示例详解

    markRaw是将一个对象标记为普通对象,而toRaw是将reactive对象变为普通对象,在 Vue 3 中,markRaw 是一个用于告诉 Vue 的响应性系统不要对某个对象进行转换或追踪其响应性的函数,下面给大家介绍vue3中markRaw详解,感兴趣的朋友一起看看吧
    2024-04-04
  • vue中两种路由模式的实现详解

    vue中两种路由模式的实现详解

    这篇文章主要为大家详细介绍了vue中两种路由模式的实现,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
    2023-08-08
  • vue插件vue-resource的使用笔记(小结)

    vue插件vue-resource的使用笔记(小结)

    本篇文章主要介绍了vue插件vue-resource的使用笔记(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue实现菜单权限控制的示例代码

    vue实现菜单权限控制的示例代码

    这篇文章主要介绍了vue实现菜单权限控制的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue3+vite项目H5配置适配步骤详解

    vue3+vite项目H5配置适配步骤详解

    这篇文章主要为大家介绍了vue3+vite项目H5配置适配步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 一个Vue页面的内存泄露分析详解

    一个Vue页面的内存泄露分析详解

    这篇文章主要介绍了一个Vue页面的内存泄露分析详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue3的watch和watchEffect你了解吗

    vue3的watch和watchEffect你了解吗

    这篇文章主要为大家详细介绍了vue的watch和watchEffect,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • elementUI checkBox报错Cannot read property 'length' of undefined解决

    elementUI checkBox报错Cannot read property &ap

    这篇文章主要为大家介绍了elementUI checkBox报错Cannot read property 'length' of undefined的解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 分享vue.js devtools遇到一系列问题

    分享vue.js devtools遇到一系列问题

    这篇文章主要为大家详细介绍了vue.js devtools遇到问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论