gpt4 book ai didi

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

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 43 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue 使用lodash实现对象数组深拷贝操作由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

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

  1. <template>
  2. <div></div>
  3. </template>
  4.  
  5. <script>
  6. export default {
  7. mounted() {
  8. this.init();
  9. },
  10. methods: {
  11. init() {
  12. let lodash = require('lodash');
  13. let obj1 = {
  14. a: 1,
  15. b: { f: { g: 1 } },
  16. c: [1, 2, 3],
  17. h: () => {
  18. return 123;
  19. },
  20. k: undefined
  21. };
  22. let obj2 = lodash.cloneDeep(obj1);
  23. obj2.b.f.g = 2;
  24. obj2.c = [1, 2];
  25. obj2.h = 1;
  26. console.log(obj1);
  27. console.log(obj2);
  28. }
  29. }
  30. };
  31. </script>

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

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

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

前言 。

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

思路 。

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

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

完整示例 。

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

  1. <template>
  2. <Form :model="formData" :label-width="80">
  3. <FormItem class="upload" label="上传文件">
  4. <Upload
  5. :before-upload="handleUpload"
  6. :action="''"
  7. :multiple="true"
  8. >
  9. <Button icon="ios-cloud-upload-outline">请选择附件</Button>
  10. </Upload>
  11. <!-- 进度条 -->
  12. <Progress v-if="upload.fileProgressShow" :percent="upload.fileProgress" />
  13. <!-- 显示列表 -->
  14. <ul>
  15. <li
  16. v-for="(item, index) of formData.dispalyFile"
  17. :key="index"
  18. >
  19. <span>{{ item.name }}</span>
  20. <Icon type="md-close" @click="handleRemove(index)" />
  21. </li>
  22. </ul>
  23. </FormItem>
  24. </Form>
  25. </template>
  26.  
  27. <script>
  28. import axios from 'axios';
  29. export default {
  30. data() {
  31. return {
  32. formData: {
  33. dispalyFile: [] // 临时数组,同时用于显示在页面
  34. },
  35. // 上传配置
  36. upload: {
  37. look: true, // 控制多文件上传,只触发一次ajax请求
  38. fileProgressShow: false, // 进度条
  39. fileProgress: 0 // 进度条进度
  40. }
  41. };
  42. },
  43. methods: {
  44. handleUpload(selectFile) {
  45. // 临时数组,同时用于显示在页面
  46. this.formData.dispalyFile.push(selectFile)
  47. // 控制多文件上传,只触发一次ajax请求
  48. if (this.upload.look) {
  49. this.upload.look = false;
  50. // 延迟请求,等待所有文件都从本地读取完毕
  51. setTimeout(() => {
  52. let formData = new FormData();
  53. this.formData.dispalyFile.map(item => {
  54. // files为后台接收参数
  55. // []为多文件数组
  56. formData.append('files[]', item);
  57. })
  58. axios.request({
  59. url: '/upload',
  60. method: 'post',
  61. data: formData,
  62. headers: { 'Content-Type': 'multipart/form-data' },
  63. onUploadProgress: (progressEvent) => {
  64. // 用于上传过程中显示进度条
  65. if (progressEvent.lengthComputable) {
  66. // 显示进度条
  67. this.upload.fileProgressShow = true;
  68. // 计算当前进度
  69. let curValue = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);
  70. // 赋值给进度条组件
  71. this.upload.fileProgress = parseInt(curValue);
  72. }
  73. }
  74. })
  75. .then(res => {
  76. // 上传成功处理
  77. // 隐藏进度条
  78. this.upload.fileProgressShow = false;
  79. })
  80. .catch(() => {
  81. // 上传失败处理
  82. // 隐藏进度条
  83. this.upload.fileProgressShow = false;
  84. })
  85. }, 50);
  86. }
  87. return false;
  88. }
  89. }
  90. };
  91. </script>
  92.  
  93. <style scoped>
  94. .upload {
  95. width: 40%;
  96. }
  97. </style>

效果图 。

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

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

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

原文链接:https://blog.csdn.net/weixin_43233914/article/details/103035185 。

最后此篇关于vue 使用lodash实现对象数组深拷贝操作的文章就讲到这里了,如果你想了解更多关于vue 使用lodash实现对象数组深拷贝操作的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

43 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com