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 名称冲突的解决方法
Apr 08 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
jQuery使用方法
Feb 04 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
Node实现搜索框进行模糊查询
Jun 28 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
关于Layui Table隐藏列问题
2019/09/16 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
vue 授权获取微信openId操作
2020/11/13 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python字典一键多值实例代码分享
2019/06/14 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
python 下载文件的多种方法汇总
2020/11/17 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
创业计划书之面包店
2019/09/17 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python