vue 使用lodash实现对象数组深拷贝操作
更新时间:2020年9月10日 11:21 点击:2308
我就废话不多说了,大家还是直接看代码吧~
<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 iview上传多文件只发送一次ajax请求,并根据上传进度显示上传进度条
前言
基于iview的上传组件(Upload)以及进度条组件(Progress)
思路
使用Upload组件提供的上传文件之前的钩子,将所有上传文件拦截下来,保存在本地临时数组,使用axios来进行上传
完整示例
进度条部分,请上传一个大文件来查看效果
<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 为二进制文件
如果本篇文章对你有帮助的话,很高兴能够帮助上你。希望能给大家一个参考,也希望大家多多支持猪先飞。
相关文章
- 在php中eval是一个函数并且不能直接禁用了,但eval函数又相当的危险了经常会出现一些问题了,今天我们就一起来看看eval函数对数组的操作 例子, <?php $data="array...2016-11-25
- 这篇文章主要介绍了java8如何用Stream查List对象某属性是否有重复的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-11
- 这篇文章主要介绍了Python 图片转数组,二进制互转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了R语言删除指定变量或对象的操作方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 本文章提供在量的数据中级操作实例有如对键名比较计算数组的差集 计算差集 给指定数组中插入一个元素 反转数组 交集赋值新的数组实例。 //定义回调函数 funct...2016-11-25
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了C#二维数组基本用法,以实例形式分析了C#中二维数组的定义、初始化、遍历及打印等用法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- Array数组在C#中同样是最基本的数据结构,下面为大家C#数组的常用操作方法小结,皆为细小的代码段,欢迎收看收藏...2020-06-25
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 下面一段代码给大家介绍php curl模拟post请求的示例代码,具体代码如下: <?php$uri = "http://www.cnblogs.com/test.php";//这里换成自己的服务器的地址// 参数数组$data = array ( 'name' => 'tanteng'// 'passwor...2015-11-24
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30