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 相关文章推荐
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
EsLint入门学习教程
Feb 17 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 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+DBM的同学录程序(4)
2006/10/09 PHP
56.com视频采集接口程序(PHP)
2007/09/22 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
vue-cli常用设置总结
2018/02/24 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
在Django中同时使用多个配置文件的方法
2015/07/22 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
python实现扫雷小游戏
2020/04/24 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
2014全国两会学习心得体会1000字
2014/03/10 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL