vue element upload组件 file-list的动态绑定实现


Posted in Javascript onOctober 11, 2019

本文解决,upload组件 file-list的动态绑定list1,list2 ...,实现动态添加,相信很多电商后台管理系统都会遇到这个需求,例子如下

vue element upload组件 file-list的动态绑定实现

本例,我是使用的upload默认的上传地址(很多图片不能上传,你可以在本地截几张图片,进行测试),我可以上传多张活动图片,可以加相应的,名称,链接描述等,如果有多个活动,可以点击添加活动,在第二个活动又能添加相应的内容,保存完之后,可以实现回显,活动详情页可以看到添加的几个活动和相应的活动内容。

实现方法不为一,这是一种特别简单的。代码如下

<template>
 <div class="view">
  <div class="item" v-for="(item,index) in formList" :key="index">
   <div style="font-size: 14px; color: #606266;line-height: 40px;">相关图片资料</div>
   <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="(file, fileList)=>{return handleRemove(file, fileList, index)}"
    :limit="5"
    :on-exceed="onExceed"
    :file-list="item.pics"
    :on-success="(response, file, fileList)=>{return onSuccess(response, file, fileList, index)}"
   >
    <i class="el-icon-plus"></i>
   </el-upload>
   <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt />
   </el-dialog>
   <el-form label-position="top" label-width="80px" :model="item">
    <el-row :gutter="20">
     <el-col :span="12">
      <el-form-item label="活动名称">
       <el-input v-model="item.name"></el-input>
      </el-form-item>
     </el-col>
     <el-col :span="12">
      <el-form-item label="活动链接">
       <el-input v-model="item.content"></el-input>
      </el-form-item>
     </el-col>
    </el-row>
   </el-form>
   <el-button type="danger" @click="delItem(index)" style="margin-bottom:20px">删除</el-button>
  </div>
  <el-button type="success" @click="addItem" style="width:1000px">添加活动</el-button>
  <el-button type="primary" @click="saveItem" style="margin-top:20px;margin-left:0;">保存活动</el-button>
 </div>
</template>
 
<script>
export default {
 name: "HelloWorld",
 data() {
  return {
   dialogImageUrl: "",
   dialogVisible: false,
   formList: [{ pics: [] }]
  };
 },
 methods: {
  // 上传图片
  onSuccess(response, file, fileList, idx) {
   // 这里是element的上传地址,对应的name,url,自己打印fileList对照
   this.formList[idx].pics.push({ name: file.name, url: file.url });
  },
  // 移除图片
  handleRemove(file, fileList, idx) {
   let Pics = this.formList[idx].pics;
   Pics.forEach((item, index) => {
    if (file.name == item.name) {
     Pics.splice(index, 1);
    }
   });
  },
  // 查看图片
  handlePictureCardPreview(file) {
   this.dialogImageUrl = file.url;
   this.dialogVisible = true;
  },
  onExceed(file, fileList) {
   this.$message({
    type: "warning",
    message: "最多上传5张"
   });
  },
  // 添加活动
  addItem() {
   this.formList.push({ pics: [] });
  },
  // 删除活动
  delItem(idx) {
   if (this.formList.length > 1) {
    this.formList.splice(idx, 1);
   } else this.formList = [{ pics: [] }];
  },
  // 保存活动
  saveItem() {
   this.$message({
    type: "success",
    message: "保存成功,可以刷新下试试回显效果"
   });
   console.log(this.formList);
   localStorage.setItem("formList", JSON.stringify(this.formList));
  }
 },
 created() {
  this.formList = JSON.parse(localStorage.getItem("formList"))|| [
   { pics: [] }
  ];;
 }
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.view {
 width: 1000px;
 margin: 0 auto;
}
.item {
 width: 100%;
}
</style>

主要实现,动态添加多个item,每个item都有对应的多张图文和介绍,可以删除,保存,下次进来可以回显继续编辑,详情展示页可以展示

github地址,可以clone下来,本地跑一下看看

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
js查找节点的方法小结
Jan 13 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
vue-ajax小封装实例
Sep 18 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
JavaScript流程控制(分支)
Dec 06 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 #Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 #Javascript
vue控制多行文字展开收起的实现示例
Oct 11 #Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 #Javascript
js脚本中执行java后台代码方法解析
Oct 11 #Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 #Javascript
ES6之Proxy的get方法详解
Oct 11 #Javascript
You might like
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
详解Vite的新体验
2021/02/22 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python写的ARP攻击代码实例
2014/06/04 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
nohup的用法
2012/11/26 面试题
推荐信怎么写
2014/05/09 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
海洋天堂观后感
2015/06/05 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
MySQL中in和exists区别详解
2021/06/03 MySQL
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏