vue 使用lodash如何实现对象数组的深拷贝

发布时间:2020-11-04 15:25:07 作者:Leah
来源:亿速云 阅读:406

vue 使用lodash如何实现对象数组的深拷贝?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<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如何实现对象数组的深拷贝

看完上述内容,你们掌握vue 使用lodash如何实现对象数组的深拷贝的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. Vue 实现CLI 3.0 + momentjs + lodash打包时优化
  2. vue+element ui框架里如何实现lodash的debounce防抖

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue lodash ue

上一篇:python中and、not、or的含义以及优先级

下一篇:VantUI项目中popup 弹窗不弹出问题怎么解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》