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 相关文章推荐
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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下使用SMTP发邮件的代码
2008/01/10 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
基于jquery实现五星好评
2017/11/18 jQuery
浅析vue.js数组的变异方法
2018/06/30 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
django主动抛出403异常的方法详解
2019/01/04 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
python实现双人五子棋(终端版)
2020/12/30 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
团员的自我评价
2013/12/01 职场文书
音乐节策划方案
2014/06/09 职场文书
公司收款委托书范本
2014/09/20 职场文书
2015年公司新年寄语
2014/12/08 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
以下牛机,你有几个
2022/04/05 无线电