The VUE front end converts the data requested from the background to the data structure

I won't talk too much. Let's just look at the code. '

let label(){
let _this = this;
let _offset = (_this.pagination.currentPage - 1) * _this.pagination.pageSize
let params ={
offset:_offset,// Paging offset 
limit:_limit,// Number of paged queries 
}
labelView(",params).then(res=>{
_this.list = res.data.data
_this.pagination.total = res.data.pagination.total;
// Transform data 
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;

Additional knowledge: Pits in Vue using Map data structure, direct set cannot trigger bidirectional data binding (solution)

1. Because we want to implement the use of es6, we often use the characteristics of es6 in the project. As a result, the set method of Map updates data, and the views cannot be synchronized.

Therefore, reset is used to achieve the goal, similar to

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

Or

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
//  Use Map Data structures can only be updated in this way 
this.collated_data = new Map(this.collated_data)

Re-assign values instead of changing references.