VUE前端從后臺(tái)請(qǐng)求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
更新時(shí)間：2020年11月11日 14:29:43 作者：LILEILEILOVE
VUE前端從后臺(tái)請(qǐng)求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說了，大家還是直接看代碼吧`
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ǔ)充知識(shí)：Vue中使用Map數(shù)據(jù)結(jié)構(gòu)的坑， 直接set 無法觸發(fā) 雙向數(shù)據(jù)綁定（解決方案）
1. 因?yàn)橄胴瀼豦s6的使用， 在項(xiàng)目中 多多使用 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前端從后臺(tái)請(qǐng)求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
elementUI中input回車觸發(fā)頁面刷新問題與解決方法
這篇文章主要給大家介紹了關(guān)于elementUI中input回車觸發(fā)頁面刷新問題與解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
今天小編就為大家分享一篇在vue項(xiàng)目中正確使用iconfont的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Mint UI 是 由餓了么前端團(tuán)隊(duì)推出的 一個(gè)基于 Vue.js 的移動(dòng)端組件庫，這篇文章主要介紹了mint-ui在vue中的使用示例，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下2018-04-04
Vant 中的Toast設(shè)置全局的延遲時(shí)間操作
這篇文章主要介紹了Vant 中的Toast設(shè)置全局的延遲時(shí)間操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue項(xiàng)目?jī)?yōu)化的一些實(shí)戰(zhàn)策略
代碼優(yōu)化不僅僅局限在業(yè)務(wù)邏輯這塊，像是代碼復(fù)用、效率等等都是我們可以加以改進(jìn)的地方，這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目?jī)?yōu)化的一些實(shí)戰(zhàn)策略，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue3中直接對(duì)reactive聲明的變量本身進(jìn)行賦值是無效的,本文主要介紹了vue3的reactive賦值問題解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-03-03
VUE Error: getaddrinfo ENOTFOUND localhost
這篇文章主要介紹了VUE Error: getaddrinfo ENOTFOUND localhost，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
vue+elementUI組件table實(shí)現(xiàn)前端分頁功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI組件table實(shí)現(xiàn)前端分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
vue雙向綁定數(shù)據(jù)限制長(zhǎng)度的方法
這篇文章主要為大家詳細(xì)介紹了vue雙向綁定數(shù)據(jù)限制長(zhǎng)度的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
過濾器提供給我們的一種數(shù)據(jù)處理方式。過濾器功能不是必須要使用的，因?yàn)樗鶎?shí)現(xiàn)的功能也能用計(jì)算屬性或者函數(shù)調(diào)用的方式來實(shí)現(xiàn)。這篇文章主要為大家介紹了Vue中過濾器的使用，需要的可以了解一下2023-03-03