Vue使用Ant Design中Tree组件用到的关于树的方法
树的深度遍历 和广度 遍历；获取树形数据中某一个特定值组成的数组；树数组转平铺数组；后台数据结构如图：组件赋值：在给组件直接赋值的时候， 发现根本不显示，之后做了一步解构在组合的情况下才重新显示了.........
·
在项目中使用树形控件 Tree - Ant Design
https://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']
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献9条内容
所有评论(0)