【vue】树形结构数据格式化（对象数组属性键名修改、属性值不变）树状组件需要有默认属性名，每层名称⼀致才可渲染：
地坪漆施工方法<el-tree
:data="menuTree"
:props="menuTreeDefaultProps"
node-key="id"
@node-click="menuTreeHandleNodeClick"
>
menuTreeDefaultProps1:{
children:'data',
label:'label'
},
但往往后端传来的数据可能每层属性名都不⼀样，所以前端需要对接收的数据进⾏格式化
对象属性键名修改：
data:{
code:0,
text:'数据分析',
plant:[],
},
// 把data下的plant改成children
data:{
code:0,
严肃的近义词text:'数据分析',
children:[],
},
关键语句
let newData=JSON.par(JSON.stringify(this.data).replace(/plant/g,"children"))
数组属性键名修改：
plant:[{
plant_code:1,
plant_name:"烘⼲车间",
台湾键盘device:[],
},{
plant_code:2,
plant_name:"窑炉车间",
device:Array(2),
}],
// 数组中属性键名挨个修改成所需
// 把plant下的plant_code改成company_id、plant_name改成company_name、device改成children
plant:[{
company_id:1,
company_name:"烘⼲车间",
说长道短
children:[],
},{
少年朗诵稿
company_id:2,
company_name:"窑炉车间",
children:Array(2),
}],
关键语句
this.plant =this.plant.map(item=>({
company_id:item.children_code,
company_name:item.children_name,
children:item.device,
}))
现实需求
原始从后端获取到的数据：
res:{
data:{
company_id:1001
company_name:"包头稀⼟园区"
plant:[{
plant_code:1,
plant_name:"烘⼲车间",
device:[{
collection_device_name:"1#电表",
collection_device_code:1
},{
collection_device_name:"2#电表",
collection_device_code:2
},{
collection_device_name:"3#电表",
collection_device_code:3
}],
},{
plant_code:2,
plant_name:"窑炉车间",
device:Array(2),
}],
}
}
输出格式化，所有name变成company_name，所有叶⼦变成children：
res:{
data:{
地产药材>头发柔顺怎么做company_id:1001
company_name:"包头稀⼟园区"
children:[{
company_id:1,
company_name:"烘⼲车间",
children:[{
company_name:"1#电表",
company_id:1
},{
company_name:"2#电表",
company_id:2
},{
company_name:"3#电表",
company_id:3
}],
},{
company_id:2,
company_name:"窑炉车间",
children:Array(2),
}],
}
}
// plant改成children
let respon =JSON.par(JSON.stringify(res.data).replace(/plant/g,"children"))
// 车间中所有键名修改
if(respon.children.length>0){
respon.children = respon.children.map(item=>({
company_id:item.children_code,
company_name:item.children_name,
children:item.device,
}))
for(const i in respon.children){
if(respon.children.hasOwnProperty(i)){
respon.children[i].children = respon.children[i].children.map(item=>({ company_llection_device_code,
company_llection_device_name,
}))
}
}
}
console.log(respon,'===');
衬衫用英语怎么说
此时的respon已经是格式化好的了！
第⼆种：
let tree = res;//后端获取的数据，需要是数组格式，如果不是可以写成: let tree = [res]; uTree = tree.map(item=>({
ade,//第⼀层grade变id
label:item.YuanName,//第⼀层YuanName变label
children:item.data.map(item1=>({//children是第⼀层的data，同上更改属性名
upID,
label:item1.wenName,
children:item1.data.map(item2=>({
id:item2.areaID,
label:item2.areaName,
children:item2.data.map(item3=>({
id:item3.deviceID,
label:item3.deviceName
})),
})),
})),
}))
