VUE前端從后臺請求過來的數(shù)據(jù)進行轉(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;
補充知識:Vue中使用Map數(shù)據(jù)結(jié)構(gòu)的坑, 直接set 無法觸發(fā) 雙向數(shù)據(jù)綁定(解決方案)
1. 因為想貫徹es6的使用, 在項目中 多多使用 es6 的特性, 結(jié)果Map 的 set 方法去更新數(shù)據(jù), 視圖無法同步,
故而使用重新設置的方式達到目的, 類似
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ù)進行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue實現(xiàn)樹形結(jié)構(gòu)樣式和功能的實例代碼
這篇文章主要介紹了vue樹形結(jié)構(gòu)樣式和功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
Vue3+TS+Vant3+Pinia(H5端)配置教程詳解
這篇文章主要介紹了Vue3+TS+Vant3+Pinia(H5端)配置教程詳解,需要的朋友可以參考下2023-01-01
Vue Element前端應用開發(fā)之動態(tài)菜單和路由的關聯(lián)處理
這篇文章主要介紹了Vue Element前端應用開發(fā)之動態(tài)菜單和路由的關聯(lián)處理,對vue感興趣的同學,可以參考下2021-05-05
vue-router跳轉(zhuǎn)方式的區(qū)別解析
在Vue中,router-link稱為聲明式路由,:to綁定為跳轉(zhuǎn)的目標地址,一種是通過name,另一種是path,這篇文章主要介紹了vue-router跳轉(zhuǎn)方式的區(qū)別,需要的朋友可以參考下2022-12-12
vue?動態(tài)路由component?傳遞變量報錯問題解決
這篇文章主要為大家介紹了vue?動態(tài)路由component?傳遞變量報錯問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05
如何用vue-cli3腳手架搭建一個基于ts的基礎腳手架的方法
這篇文章主要介紹了如何用vue-cli3腳手架搭建一個基于ts的基礎腳手架的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-12-12

