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 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 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
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP概率计算函数汇总
2015/09/13 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
php简单中奖算法(实例)
2017/08/15 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
使用PHP开发留言板功能
2019/11/19 PHP
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
创优争先心得体会
2014/09/11 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
六一儿童节致辞
2015/07/31 职场文书
汶川大地震感悟
2015/08/10 职场文书
创业计划书介绍
2019/04/24 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
带你了解Java中的ForkJoin
2022/04/28 Java/Android