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

您可能感兴趣的文章:

前端vue3实现图片懒加载的完整步骤记录
在现代前端开发中懒加载是一种提高应用性能和用户体验的重要技术,尤其是在处理较大图片或长列表数据时,这篇文章主要介绍了前端vue3实现图片懒加载的相关资料,需要的朋友可以参考下
2025-06-06
vue3 vite ant deign vue黑暗模式实现过程
该文章介绍了如何通过CSS变量和全局CSS文件实现黑暗模式,主要内容包括：创建`dark.less`和`light.less`文件对应黑暗和白天模式,使用CSS变量替换原有数值,编写切换CSS函数及切换黑暗/白天模式的函数,使用此方法,只需调用切换函数即可实现模式切换
2026-04-04
详细讲解如何创建, 发布自己的 Vue UI 组件库
当我们自己开发了一个 _UI Component_, 需要在多个项目中使用的时候呢? 我们首先想到的可能是直接复制一份过去对吗?我们为什么不发布一个 UI 组件库给自己用呢?下面小编和大家来一起学习下吧
2019-05-05
vue的rules验证部分可以部分又失效的原因及解决方案
vue的rules验证失效,部分可以部分又失效,很多百度都有,但是我这里遇到了一个特别的,那就是prop没有写全,导致验证某一个失效,接下来就跟小编一起来看看这个失效的原因和解决方案吧
2023-11-11
Vue3使用Univer Docs创建在线编辑Excel的示例代码
本文介绍了如何在Vue3项目中集成UniverDocs,一个基于Luckysheet的企业文档与数据协同解决方案,指导了从安装到在页面中使用的步骤,以及注意事项,如数据格式转换和二次开发的灵活性,需要的朋友可以参考下
2025-04-04
vue滑动吸顶及锚点定位的示例代码
这篇文章主要介绍了vue滑动吸顶及锚点定位的示例代码,代码简单易懂，非常不错对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-05-05
vue甘特图vxe-gantt实现点击任务条弹出编辑表单效果
本文将介绍如何使用 vxe-gantt 组件实现点击任务条弹出编辑表单的功能,支持对任务的名称、时间、进度、负责人、图片附件等信息进行编辑,感兴趣的朋友跟随小编一起看看吧
2026-03-03
Vue.js中让人容易忽略的API详解
Vue.js是构建Web界面的渐进式JavaScript框架,通过简洁的 API 提供高效的数据绑定和灵活的组件系统,这篇文章主要给大家介绍了关于Vue.js中让人容易忽略的API的相关资料,需要的朋友可以参考下
2021-09-09
vue实现页面渲染时候执行某需求的示例代码
本文主要介绍了vue实现页面渲染时候执行某需求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-05-05
vue中Props与Attrs的实现实例
本文主要介绍了vue中Props与Attrs的实现实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-09-09

vue 模板循环绘制多行上传文件功能实现

目录

循环绘制模板

事件

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具