SoFunction
Updated on 2025-04-05

The VUE front-end converts data structure operation

I won't say much nonsense, let's just look at the code`

let label(){
let _this = this;
let _offset = (_this. - 1) * _this.
let params ={
offset:_offset,//Pagination offsetlimit:_limit,//The number of page query}
labelView(",params).then(res=>{
_this.list = 
_this. = ;
//Convert datalet treeDataArray = new Array();
const element = _this.list
let obj={
name:"",
isExpand:true,
children:new Array()
}
(obj);
for(let dd1 = 0;dd1<_this.;dd1++){
const element = _this.list[dd];
let obj1 ={
root:true,
isExpand:true,
name:element['model'],
children:new Array()
}
(obj1);
for(let dd2 = 0;dd2<;dd2++){
const element2 = [dd2];
let obj2 = {
name:element['label2'],
isExpand:true,
children:new Array()
};
(obj2);
for(let dd3 = 0;dd3<element2['label3'].length;dd3++){
const element3 = element2['label3'][dd3];
({
name:element3,
})
}
}
}
_this.treeList = treeDataArray;

Supplementary knowledge:The pit in Vue using Map data structures, directly set cannot trigger bidirectional data binding (solution)

1. Because I want to implement the use of es6, I use the features of es6 more in the project. As a result, the Map set method updates the data, and the view cannot be synchronized.

Therefore, the reset method is used to achieve the purpose, similar

let obj = ({},{})

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 to update only like thisthis.collated_data = new Map(this.collated_data)

Reassign values ​​instead of changing references.

The above article on the data requested by the VUE front-end from the backend to convert the data structure operation is all the content I share with you. I hope it can give you a reference and I hope you can support me more.