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

相关文章

  • 基于electron+vue3+ts搭建桌面端应用并且可以热更新

    基于electron+vue3+ts搭建桌面端应用并且可以热更新

    这篇文章主要为大家详细介绍了如何基于electron+vue3+ts搭建桌面端应用并且可以热更新,文中的示例代码讲解详细,感兴趣的小伙伴可以参考下
    2023-10-10
  • vue2.0 axios跨域并渲染的问题解决方法

    vue2.0 axios跨域并渲染的问题解决方法

    下面小编就为大家分享一篇vue2.0 axios跨域并渲染的问题解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue 清空input标签 中file的值操作

    vue 清空input标签 中file的值操作

    这篇文章主要介绍了vue 清空input标签 中file的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • element-ui中的clickoutside点击空白隐藏元素

    element-ui中的clickoutside点击空白隐藏元素

    这篇文章主要为大家介绍了element-ui中的clickoutside点击空白隐藏元素示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vuex3和Vuex4有哪些区别

    Vuex3和Vuex4有哪些区别

    本文主要介绍了Vuex3和Vuex4有哪些区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue 实现购物车总价计算

    vue 实现购物车总价计算

    今天小编就为大家分享一篇vue 实现购物车总价计算,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 解决echarts图表y轴数据间隔过大的问题

    解决echarts图表y轴数据间隔过大的问题

    这篇文章主要介绍了解决echarts图表y轴数据间隔过大的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue实现生成本地Json文件功能方式

    Vue实现生成本地Json文件功能方式

    这篇文章主要介绍了Vue实现生成本地Json文件功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    这篇文章主要介绍了vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue.js学习之过滤器详解

    Vue.js学习之过滤器详解

    过滤器,本质上就是一个函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴,一起来看看吧。
    2017-01-01

最新评论