VUE前端從后臺請求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
我就廢話不多說了,大家還是直接看代碼吧`
let label(){ let _this = this; let _offset = (_this.pagination.currentPage - 1) * _this.pagination.pageSize let params ={ offset:_offset,//分頁偏移量 limit:_limit,//分頁查詢數(shù)量 } labelView(",params).then(res=>{ _this.list = res.data.data _this.pagination.total = res.data.pagination.total; //轉(zhuǎn)換數(shù)據(jù) 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, isExpand: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'], isExpand:true, 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;
補(bǔ)充知識:Vue中使用Map數(shù)據(jù)結(jié)構(gòu)的坑, 直接set 無法觸發(fā) 雙向數(shù)據(jù)綁定(解決方案)
1. 因為想貫徹es6的使用, 在項目中 多多使用 es6 的特性, 結(jié)果Map 的 set 方法去更新數(shù)據(jù), 視圖無法同步,
故而使用重新設(shè)置的方式達(dá)到目的, 類似
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數(shù)據(jù)結(jié)構(gòu)只能這樣更新 this.collated_data = new Map(this.collated_data)
重新賦值, 而不是更改引用。
以上這篇VUE前端從后臺請求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
elementUI中input回車觸發(fā)頁面刷新問題與解決方法
這篇文章主要給大家介紹了關(guān)于elementUI中input回車觸發(fā)頁面刷新問題與解決方法,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07VUE Error: getaddrinfo ENOTFOUND localhost
這篇文章主要介紹了VUE Error: getaddrinfo ENOTFOUND localhost,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05vue+elementUI組件table實現(xiàn)前端分頁功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI組件table實現(xiàn)前端分頁功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-12-12