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)文章
vue項(xiàng)目中,前端使用axios與后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求或者提交的時(shí)候,如果后臺(tái)沒有設(shè)置跨域,瀏覽器做數(shù)據(jù)請(qǐng)求的時(shí)候就會(huì)報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于vue如何解決axios請(qǐng)求前端跨域問題的相關(guān)資料,需要的朋友可以參考下2021-10-10
在團(tuán)體開發(fā)項(xiàng)目中,為了團(tuán)隊(duì)所有成員書寫可維護(hù)的代碼,而不是一次性的代碼,讓團(tuán)隊(duì)當(dāng)中其他人看你的代碼能一目了然,下面這篇文章主要給大家介紹了關(guān)于Vue前端書寫規(guī)范的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue實(shí)現(xiàn)抽獎(jiǎng)效果Demo
這篇文章主要介紹了vue實(shí)現(xiàn)抽獎(jiǎng)效果Demo,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue實(shí)現(xiàn)樹形結(jié)構(gòu)樣式和功能的實(shí)例代碼
這篇文章主要介紹了vue樹形結(jié)構(gòu)樣式和功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
Vue3+TS+Vant3+Pinia(H5端)配置教程詳解
這篇文章主要介紹了Vue3+TS+Vant3+Pinia(H5端)配置教程詳解,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue中如何禁止input框和textarea編輯，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue Element前端應(yīng)用開發(fā)之動(dòng)態(tài)菜單和路由的關(guān)聯(lián)處理
這篇文章主要介紹了Vue Element前端應(yīng)用開發(fā)之動(dòng)態(tài)菜單和路由的關(guān)聯(lián)處理，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05
vue-router跳轉(zhuǎn)方式的區(qū)別解析
在Vue中，router-link稱為聲明式路由，:to綁定為跳轉(zhuǎn)的目標(biāo)地址，一種是通過name，另一種是path，這篇文章主要介紹了vue-router跳轉(zhuǎn)方式的區(qū)別,需要的朋友可以參考下2022-12-12
vue?動(dòng)態(tài)路由component?傳遞變量報(bào)錯(cuò)問題解決
這篇文章主要為大家介紹了vue?動(dòng)態(tài)路由component?傳遞變量報(bào)錯(cuò)問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
如何用vue-cli3腳手架搭建一個(gè)基于ts的基礎(chǔ)腳手架的方法
這篇文章主要介紹了如何用vue-cli3腳手架搭建一個(gè)基于ts的基礎(chǔ)腳手架的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12