Vue使用Ant Design中Tree组件用到的关于树的方法

在项目中使用树形控件 Tree - Ant Designhttps://ant.design/components/tree-cn/组件的时候，发现一个很奇葩的问题。目前还没搞明白什么情况...

后端返回的树形数据  和 UI框架中示例的数据并没有看出有任何的不相符（除了字段不一致）。

官网Tree组件:

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',
          },
        ],
      },
    ],
  },
];

后台数据结构如图：

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'}]

组件赋值：

<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"
/>

 在给组件直接赋值的时候  ， 发现根本不显示，之后做了一步解构在组合的情况下才重新显示了

1、根据某一特定的值，返回树数组的某一项

//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、树形结构数组转平铺数据

// 树形结构转平铺数组
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、平铺数据转树形结构

平铺数组转树形结构数组：
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、深度遍历（对每一个元素由浅到深，层层递进循环）

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、广度遍历（循环最外层，有子元素的取出来追加到原数组）

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']