1. 程式人生 > 程式設計 >VUE前端從後臺請求過來的資料進行轉換資料結構操作

VUE前端從後臺請求過來的資料進行轉換資料結構操作

我就廢話不多說了,大家還是直接看程式碼吧`

let label(){
let _this = this;
let _offset = (_this.pagination.currentPage - 1) * _this.pagination.pageSize
let params ={
offset:_offset,//分頁偏移量
limit:_limit,//分頁查詢數量
}
labelView(",params).then(res=>{
_this.list = res.data.data
_this.pagination.total = res.data.pagination.total;
//轉換資料
let treeDataArray = new Array();
const element = _this.list
let obj={
name:"",isExpand:true,children:new Array()
}
treeDataArray.push(obj);
for(let dd1 = 0;dd1<_this.list.length;dd1++){
const element = _this.list[dd];
let obj1 ={
root:true,name:element['model'],children:new Array()
}
obj.children.push(obj1);
for(let dd2 = 0;dd2<element.label.length;dd2++){
const element2 = element.label[dd2];
let obj2 = {
name:element['label2'],children:new Array()
};
obj1.children.push(obj2);
for(let dd3 = 0;dd3<element2['label3'].length;dd3++){
const element3 = element2['label3'][dd3];
obj2.children.push({
name:element3,})
}
}
}
_this.treeList = treeDataArray;

補充知識:Vue中使用Map資料結構的坑, 直接set 無法觸發 雙向資料繫結(解決方案)

1. 因為想貫徹es6的使用, 在專案中 多多使用 es6 的特性, 結果Map 的 set 方法去更新資料, 檢視無法同步,

故而使用重新設定的方式達到目的, 類似

let obj = Object.assign({},{})

或者

let arr = [].concat['a']

let no = server_no.toString()
let is_check = this.collated_data.get(no).is_check
this.collated_data.get(no).is_check = !is_check
// 使用Map資料結構只能這樣更新
this.collated_data = new Map(this.collated_data)

重新賦值, 而不是更改引用。

以上這篇VUE前端從後臺請求過來的資料進行轉換資料結構操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。