vue 使用lodash实现对象数组深拷贝操作


Posted in Javascript onSeptember 10, 2020

我就废话不多说了,大家还是直接看代码吧~

<template>
 <div></div>
</template>

<script>
export default {
 mounted() {
  this.init();
 },
 methods: {
  init() {
   let lodash = require('lodash');
   let obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3],
    h: () => {
     return 123;
    },
    k: undefined
   };
   let obj2 = lodash.cloneDeep(obj1);
   obj2.b.f.g = 2;
   obj2.c = [1, 2];
   obj2.h = 1;
   console.log(obj1);
   console.log(obj2);
  }
 }
};
</script>

vue 使用lodash实现对象数组深拷贝操作

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

补充知识:vue iview上传多文件只发送一次ajax请求,并根据上传进度显示上传进度条

前言

基于iview的上传组件(Upload)以及进度条组件(Progress)

思路

使用Upload组件提供的上传文件之前的钩子,将所有上传文件拦截下来,保存在本地临时数组,使用axios来进行上传

vue 使用lodash实现对象数组深拷贝操作

完整示例

进度条部分,请上传一个大文件来查看效果

<template>
 <Form :model="formData" :label-width="80">
  <FormItem class="upload" label="上传文件">
   <Upload
    :before-upload="handleUpload"
    :action="''"
    :multiple="true"
   >
    <Button icon="ios-cloud-upload-outline">请选择附件</Button>
   </Upload>
   <!-- 进度条 -->
   <Progress v-if="upload.fileProgressShow" :percent="upload.fileProgress" />
   <!-- 显示列表 -->
   <ul>
    <li
     v-for="(item, index) of formData.dispalyFile"
     :key="index"
    >
     <span>{{ item.name }}</span>
     <Icon type="md-close" @click="handleRemove(index)" />
    </li>
   </ul>
  </FormItem>
 </Form>
</template>

<script>
import axios from 'axios';
export default {
 data() {
  return {
   formData: {
    dispalyFile: [] // 临时数组,同时用于显示在页面
   },
   // 上传配置
   upload: {
    look: true, // 控制多文件上传,只触发一次ajax请求
    fileProgressShow: false, // 进度条
    fileProgress: 0 // 进度条进度
   }
  };
 },
 methods: {
  handleUpload(selectFile) {
   // 临时数组,同时用于显示在页面
   this.formData.dispalyFile.push(selectFile)
   // 控制多文件上传,只触发一次ajax请求
   if (this.upload.look) {
    this.upload.look = false;
    // 延迟请求,等待所有文件都从本地读取完毕
    setTimeout(() => {
     let formData = new FormData();
     this.formData.dispalyFile.map(item => {
      // files为后台接收参数
      // []为多文件数组
      formData.append('files[]', item);
     })
     axios.request({
      url: '/upload',
      method: 'post',
      data: formData,
      headers: { 'Content-Type': 'multipart/form-data' },
      onUploadProgress: (progressEvent) => {
       // 用于上传过程中显示进度条
       if (progressEvent.lengthComputable) {
        // 显示进度条
        this.upload.fileProgressShow = true;
        // 计算当前进度
        let curValue = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);
        // 赋值给进度条组件
        this.upload.fileProgress = parseInt(curValue);
       }
      }
     })
      .then(res => {
       // 上传成功处理
       // 隐藏进度条
       this.upload.fileProgressShow = false;
      })
      .catch(() => {
       // 上传失败处理
       // 隐藏进度条
       this.upload.fileProgressShow = false;
      })
    }, 50);
   }
   return false;
  }
 }
};
</script>

<style scoped>
.upload {
 width: 40%;
}
</style>

效果图

上传多文件,只进行了一次ajax请求,这里xlz是一个超大压缩包,用于展示进度条效果, binary 为二进制文件

vue 使用lodash实现对象数组深拷贝操作

如果本篇文章对你有帮助的话,很高兴能够帮助上你。希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 #Javascript
vue 导出文件,携带请求头token操作
Sep 10 #Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 #Javascript
jquery实现简单每周轮换的日历
Sep 10 #jQuery
vue循环中点击选中再点击取消(单选)的实现
Sep 10 #Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 #Javascript
vue使用echarts实现水平柱形图实例
Sep 09 #Javascript
You might like
PHP个人网站架设连环讲(四)
2006/10/09 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
js实现广告漂浮效果的小例子
2013/07/02 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
python创建关联数组(字典)的方法
2015/05/04 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
次世代生活态度:Hypebeast
2018/07/05 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
中学家长会邀请函
2014/01/17 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
经济国贸专业求职信
2014/06/18 职场文书
不错的求职信范文
2014/07/20 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
跑出一片天观后感
2015/06/08 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技