树节点数据处理：属性拼接

后台返回的数据格式如下，现在要求，每一层级需要先展示children数据，再展示devices数据，也就是children数组拼接devices数组

// 后台返回的数据结构const data = [{type: 'ORG',num: '20230515141030',name: 'xx公交集团',children: [{type: 'ORG',num: '111111111',name: '111车队',children: [{type: 'ROUTE',num: 'aaaaa',name: '1路',children: [],devices: [{'id': '1','device_num': '1000000000','cor_org_num': '2000000000000','cor_org_name': 'xx公交集团','fleet_org_num': '30000000000000','fleet_org_name': '城市公交运营车队','route_id': 55667788,'route_name': '1路','plate_num': '浙KK7088','vehicle_num': '707'}]}],devices: [{'id': '3','device_num': '7000000000','cor_org_num': '8000000000000','cor_org_name': 'xx公交集团','fleet_org_num': '90000000000000','fleet_org_name': '城市公交运营车队','route_id': 55667788,'route_name': '1路','plate_num': '浙KK8888','vehicle_num': '909'}]}, {type: 'ORG',num: '22222222',name: '222车队',children: []}],devices: []}]

需要进行递归处理，直接上代码

<methods>
transformTree(nodes) {return nodes.map(node => {// 递归处理子节点const children = this.transformTree(node.children || [])// 转换当前节点的 devices 为 DEVICE 节点，并添加 labelconst devices = (node.devices || []).map(device => {// 动态生成设备的 labelconst vehicleNum = device.vehicle_num ? device.vehicle_num.trim() : '' // 可选链避免空值错误const plateNum = device.plate_num ? device.plate_num.trim() : '未知车牌'const label = vehicleNum ? `【${vehicleNum}】- ${plateNum}` : `【无编号】- ${plateNum}`return {type: 'DEVICE',...device,label, // 添加 labelchildren: [] // 设备没有子节点}})// 合并处理后的子节点和设备节点const mergedChildren = [...children, ...devices]// 创建新节点，添加 label 并移除 devices 属性const newNode = {...node,label: node.name, // 非设备节点的 label 直接取 namechildren: mergedChildren}delete newNode.devices // 清理原 devices 属性return newNode})},
getTreeData() {// 假设接口获取到data数据// 然后可以直接通过 this.transformTree(data) 进行转换this.treeData = this.transformTree(data)
},
// 输出打印结果如下：this.treeData = [{'type': 'ORG','num': '20230515141030','name': 'xx公交集团','children': [{'type': 'ORG','num': '111111111','name': '111车队','children': [{'type': 'ROUTE','num': 'aaaaa','name': '1路','children': [{'type': 'DEVICE','id': '1','device_num': '1000000000','cor_org_num': '2000000000000','cor_org_name': 'xx公交集团','fleet_org_num': '30000000000000','fleet_org_name': '城市公交运营车队','route_id': 55667788,'route_name': '1路','plate_num': '浙KK7088','vehicle_num': '707','label': '【707】- 浙KK7088','children': []}],'label': '1路'}, {'type': 'DEVICE','id': '3','device_num': '7000000000','cor_org_num': '8000000000000','cor_org_name': 'xx公交集团','fleet_org_num': '90000000000000','fleet_org_name': '城市公交运营车队','route_id': 55667788,'route_name': '1路','plate_num': '浙KK8888','vehicle_num': '909','label': '【909】- 浙KK8888','children': []}],'label': '111车队'}, {'type': 'ORG','num': '22222222','name': '222车队','children': [],'label': '222车队'}],'label': 'xx公交集团'}]
</methods>

调用方式：

<template><el-tree:data="treeData":default-expanded-keys="[0]":props="defaultProps"accordion@node-click="handleNodeClick"/>
</template>
<script>
data() {return {defaultProps: {children: 'children',label: 'label',vehicle_num: 'vehicle_num',plate_num: 'plate_num'},}
}
</script>