When using the tree control Tree - Ant Design 
https://ant.design/components/tree-cn/ component in the project , I found a very strange problem. Still haven't figured out what's going on...
There is no discrepancy between the tree data returned by the backend and the sample data in the UI framework (except for field inconsistencies).
Official website Tree component:
const treeData = [
{
title: 'parent 1',
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
disabled: true,
children: [
{
title: 'leaf',
key: '0-0-0-0',
disableCheckbox: true,
},
{
title: 'leaf',
key: '0-0-0-1',
},
],
},
{
title: 'parent 1-1',
key: '0-0-1',
children: [
{
title: (
<span
style={
{
color: '#1890ff',
}}
>
sss
</span>
),
key: '0-0-1-0',
},
],
},
],
},
];The background data structure is shown in the figure:
orgList[
{orgName: '物业投资有限公司', parentOrgCode: '000000001', children: Array(0), orgCode: '000000001', socialUniformCreditCode: '91110108790650314X'}
{orgName: '中国邮政集团有限公司', parentOrgCode: '000000002', orgCode: '000000002', socialUniformCreditCode: '911000000000192465', title: '中国邮政集团有限公司'}
{orgName: '保险（中国）有限公司', parentOrgCode: '000000004', children: Array(1), orgCode: '000000004', socialUniformCreditCode: '91110000717868210L'}
{orgName: '银行股份有限公司', parentOrgCode: '000000005', children: Array(3), orgCode: '000000005', socialUniformCreditCode: '91420100300248067P'}
{orgName: 'iPhone', parentOrgCode: 'C000001563', children: Array(0), orgCode: 'C000001563', socialUniformCreditCode: '123456789009876543'}
{orgName: '杰克琼斯', parentOrgCode: 'C000001566', children: Array(0), orgCode: 'C000001566', socialUniformCreditCode: '123411789009876543'}
{orgName: '科技', parentOrgCode: 'C000001569', children: Array(0), orgCode: 'C000001569', socialUniformCreditCode: '132222212221112232'}
{orgName: '上海', parentOrgCode: 'C000001573', children: Array(0), orgCode: 'C000001573', socialUniformCreditCode: '132222277788766666'}
{orgName: '成都', parentOrgCode: 'C000001574', children: Array(0), orgCode: 'C000001574', socialUniformCreditCode: '322222111123323343'}
{orgName: '哈哈', parentOrgCode: 'C000001576', children: Array(0), orgCode: 'C000001576', socialUniformCreditCode: '91110108790650314Y'}]Component assignment:
<TreeSelect
v-model:value="value"
show-line
tree-data-simple-mode
:placeholder="placeholder"
:tree-checkable="treeCheckable"
:fieldNames="fieldNames"
:multiple="multiple"
:show-search="showSearch"
:tree-data="list"
:disabled="disabled"
:showCheckedStrategy="showCheckedStrategy"
:filterTreeNode="filterTreeNode"
@change="onChange2"
@select="onSelect"
/>When directly assigning values to the components, it was found that it was not displayed at all, and then it was redisplayed after a step of deconstruction and combination
1. According to a specific value, return an item of the tree array
//data为tree数据，orgCode为某一特定的值
const separateOrgData = (data, orgCode) => {
let childArray = [];
let hasOrgCode = false; //是否有找到特定值标识
var fn = function(data) {
if(Array.isArray(data) && !hasOrgCode){ //是否是数组且没有找到的情况下
data.forEach(item => {//循环每个子项，判断子项下边是否有查询值
if(item.orgCode == orgCode){ //查询到则添加且将状态置为true
childArray.push(item);
hasOrgCode = true;
}else if(item.children && item.children.length > 0){
fn(item.children) //递归调用下边的子项
}
})
}
}
fn(data); //首次进入方法 主动触发一次
return childArray
};2. Convert tree structure array to tiled data
// 树形结构转平铺数组
const toTreeArr = (arr) => {
let result = [];
let node = [];
node = node.concat(arr);
while(node.length){
let first = node.shift(); // 每一次都取node的第一项出来
if (first.children) {
node = node.concat(first.children); // 如果第一项有children属性，那么就把这个children放到node的最后一项取
delete first.children; // 然后再删除children属性，让第一项变成普通形式{name: xxx, id: xxx}
}
console.log('first', first);
result.push(first)
}
return result
}3. Convert flat data to tree structure
平铺数组转树形结构数组：
const totree = (arr) => {
let result = [];
let map = {};
arr.forEach(item => map[item.name] = item); //以name为key值，把数组转换成字符串
arr.forEach(item => {
let father = map[item.id] // 通过遍历数据，用id去匹配map对象里的key值，如果有id能跟map对象的key值匹配，就说明这个key值对应的对象是有子集的
if (father) {
(father.children || (father.children = [])).push(item) // 给对应的元素添加children属性，把那个item加进去
}else {
result.push(item) // 如果没有map对象对应当前item，说明这个item的id是独一无二的，那么他自然就是第一级的了，把他加到result里面去
}
})
return result; // 利用复杂数组用map的形式赋值到新对象，新旧对象还存在关联关系
}4. Depth traversal (from shallow to deep for each element, progressively looping layer by layer)
const deepTree = (data)=>{
let targetArray = [];
for(let item of data){
item.orgCode && targetArray.push(item.orgCode);
if(item.children && Array.isArray(item.children)){
targetArray = [...targetArray, ...deepTree(item.children)]
}
}
return targetArray;
}
console.log("数据", deepTree(orgList)) //数据 (90) ['000000001', '000000002', '000000003', '000000006', 'C000001678', 'C000001681', 'C000001744', 'C000001743', 'C000001746', 'C000001749', 'C000001819', 'C000001820', '000000004', 'C000001816', '000000005', 'C000001585', 'C000001699', 'C000001821', 'C000001563', 'C000001566', 'C000001569', 'C000001573', 'C000001574', 'C000001576', 'C000001579', 'C000001580', 'C000001582', 'C000001586', 'C000001587', 'C000001588', 'C000001589', 'C000001597', 'C000001598', 'C000001603', 'C000001606', 'C000001607', 'C000001611', 'C000001612', 'C000001613', 'C000001615', 'C000001618', 'C000001619', 'C000001621', 'C000001623', 'C000001625', 'C000001627', 'C000001629', 'C000001630', 'C000001632', 'C000001633', 'C000001673', 'C000001635', 'C000001642', 'C000001643', 'C000001646', 'C000001654', 'C000001656', 'C000001657', 'C000001659', 'C000001660', 'C000001661', 'C000001671', 'C000001675', 'C000001684', 'C000001688', 'C000001689', 'C000001694', 'C000001695', 'C000001736', 'C000001822', 'C000001692', 'C000001693', 'C000001697', 'C000001698', 'C000001691', 'C000001711', 'C000001715', 'C000001717', 'C000001718', 'C000001719', 'C000001723', 'C000001724', 'C000001725', 'C000001726', 'C000001729', 'C000001730', 'C000001733', 'C000001734', 'C000001735', 'C000001825']5. Breadth traversal (the outermost layer of the loop, take out the sub-elements and append them to the original array)
const deepTree = (data)=>{
let targetArray = [];
while(data.length > 0){
let item = data.shift();
item.orgCode && targetArray.push(item.orgCode);
if(item.children && item.children.length > 0){
data = [...data, ...item.children];
}
}
return targetArray;
}
console.log("数据", deepTree(orgList)) //数据 (90) ['000000001', '000000002', '000000003', '000000006', 'C000001678', 'C000001681', 'C000001744', 'C000001743', 'C000001746', 'C000001749', 'C000001819', 'C000001820', '000000004', 'C000001816', '000000005', 'C000001585', 'C000001699', 'C000001821', 'C000001563', 'C000001566', 'C000001569', 'C000001573', 'C000001574', 'C000001576', 'C000001579', 'C000001580', 'C000001582', 'C000001586', 'C000001587', 'C000001588', 'C000001589', 'C000001597', 'C000001598', 'C000001603', 'C000001606', 'C000001607', 'C000001611', 'C000001612', 'C000001613', 'C000001615', 'C000001618', 'C000001619', 'C000001621', 'C000001623', 'C000001625', 'C000001627', 'C000001629', 'C000001630', 'C000001632', 'C000001633', 'C000001673', 'C000001635', 'C000001642', 'C000001643', 'C000001646', 'C000001654', 'C000001656', 'C000001657', 'C000001659', 'C000001660', 'C000001661', 'C000001671', 'C000001675', 'C000001684', 'C000001688', 'C000001689', 'C000001694', 'C000001695', 'C000001736', 'C000001822', 'C000001692', 'C000001693', 'C000001697', 'C000001698', 'C000001691', 'C000001711', 'C000001715', 'C000001717', 'C000001718', 'C000001719', 'C000001723', 'C000001724', 'C000001725', 'C000001726', 'C000001729', 'C000001730', 'C000001733', 'C000001734', 'C000001735', 'C000001825']