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 相关文章推荐
jQuery autocomplete插件修改
Apr 17 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
Angular实现响应式表单
Aug 04 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
ReactNative列表ListView的用法
2017/08/02 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
python进阶教程之词典、字典、dict
2014/08/29 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python中if及if-else如何使用
2020/06/02 Python
什么是python类属性
2020/06/10 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
UDP协议功能
2013/01/06 面试题
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
医学生自我评价
2014/01/27 职场文书
军训感想500字
2014/02/20 职场文书
甘南现象心得体会
2014/09/11 职场文书
大足石刻导游词
2015/02/02 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python