1. 程式人生 > 程式設計 >vue 使用lodash實現物件陣列深拷貝操作

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實現物件陣列深拷貝操作

如果本篇文章對你有幫助的話,很高興能夠幫助上你。希望能給大家一個參考,也希望大家多多支援我們。