ant tree 展开key的集合

这次有个功能 ant的tree 展开 点击子节点 新增节点之后 数据能够照常展开

有几种方法

我能想到的 因为ant 有个expanded 只要设置为true就能展开了，但是这边有个陷阱，就是仅仅设置子节点的expanded为true的时候 它父节点是不展开的，也需要它父节点额expanded为true

它还提供了一个api 就有个defaultExpandedKeys = ['0-0', '0-0-0', '0-0-1']; 这个defaultExpandedKeys 数组里面的值就算它父节点的key集合们

第一种方法 将data 每个都要添加pathKeys 

var spect = [{
"key": 22456260137536,
"id": "root",
pathKeys: [],
"type": "org",
"title": "根组织",
"parentSid": 0,
"children": [{
"key": 22456302834240,
pathKeys: [],
"id": "child_1",
"type": "org",
"title": "部门",
"parentSid": 22456260137536,
"children": [{
"key": 120250157011520,
pathKeys: [],
"id": "147460064539200",
"type": "org",
"title": "test-001",
"parentSid": 22456302834240
}, {
"key": 120619034903104,
pathKeys: [],
"id": "147828945097280",
"type": "org",
"title": "test000",
"parentSid": 22456302834240
}, {
"key": 120619165348416,
pathKeys: [],
"id": "147829075550784",
"type": "org",
"title": "2222",
"parentSid": 22456302834240
}, {
"key": 120626434175552,
pathKeys: [],
"id": "147836344422976",
"type": "org",
"title": "333",
"parentSid": 22456302834240
}, {
"key": 121592991220288,
pathKeys: [],
"id": "148802957083200",
"type": "org",
"title": "qiqiqi23333",
"parentSid": 22456302834240
}]
}, {
"key": 121665603314240,
pathKeys: [],
"id": "148875569611328",
"type": "org",
"title": "333",
"parentSid": 22456260137536
}, {
"key": 121665737142848,
pathKeys: [],
"id": "148875703456320",
"type": "org",
"title": "233333",
"parentSid": 22456260137536,
"children": [{
"key": 121674823979584,
pathKeys: [],
"id": "148884790379072",
"type": "org",
"title": "122",
"parentSid": 121665737142848
}, {
"key": 121675403362880,
pathKeys: [],
"id": "148885369774656",
"type": "org",
"title": "333",
"parentSid": 121665737142848
}, {
"key": 121675935605312,
"id": "148885902012992",
"type": "org",
"title": "2222",
"parentSid": 121665737142848
}]
}, {
"key": 57249373893184,
"id": "aa",
"type": "role",
"title": "aaa",
"parentSid": 22456260137536
}]
}, {
"key": 38166237606464,
pathKeys: [],
"id": "test",
"type": "org",
"title": "test",
"parentSid": 0,
"children": [{
"key": 40615561060928,
pathKeys: [],
"id": "testchil",
"type": "org",
"title": "testchil",
"parentSid": 38166237606464
}]
}, {
"key": 40619971723840,
pathKeys: [],
"id": "test1",
"type": "org",
"title": "test11",
"parentSid": 0,
"children": [{
"key": 40621094822464,
pathKeys: [],
"id": "test1chil",
"type": "org",
"title": "test1chil",
"parentSid": 40619971723840
}]
}, {
"key": 114144172368448,
pathKeys: [],
"id": "sftest",
"type": "org",
"title": "sftest",
"parentSid": 0
}, {
"key": 114581250646592,
pathKeys: [],
"id": "sftest1",
"type": "org",
"title": "sftest1",
"parentSid": 0
}, {
"key": 114596497031744,
pathKeys: [],
"id": "sftest2",
"type": "org",
"title": "sftest2",
"parentSid": 0
}, {
"key": 116697090073152,
pathKeys: [],
"id": "sftest3",
"type": "org",
"title": "sftest3",
"parentSid": 0,
"children": [{
"key": 119797568778816,
pathKeys: [],
"id": "147006679814720",
"type": "org",
"title": "sftest4",
"parentSid": 116697090073152
}]
}, {
"key": 120238754472512,
pathKeys: [],
"id": "147448661918272",
"type": "org",
"title": "我测试的数据源",
"parentSid": 0
}, {
"key": 120240105521728,
pathKeys: [],
"id": "147450012979776",
"type": "org",
"title": "test-001",
"parentSid": 0
}];

 getPathKeys(data) {

    if (!Array.isArray(data)) {

        return data;

      }

      const run = (arr, pathKeys) => {

        if (!Array.isArray(arr)) {

          return;

        }

        return arr.map(item => {

          if (Array.isArray(item.children)) {

            item = {

              ...item,

              children: run(item.children, [...pathKeys, item.key]),

            };

          }

          return {

            ...item,

            pathKeys,

          };

        });

      };

      return run(data, []);

  }

这样返回的数据就是每个children的pathKeys 都会有自己和父节点的key的集合，只要将这个集合赋值defaultExpandedKeys，就可以正常显示了

 

方法二

function findChild(arr, id) {
    for(let i = 0; i < arr.length; i++) {
     const item = arr[i];
if (item.id === id) {
item.expanded= true;
return item;
}
if (item.children) {
const result = findChild(item.children, id);
  if (result) {
console.log(item);
item.expanded = true;
return result;
}
}
    }

}

findChild(spect, '147836344422976'); 很明显你点击展开的时候 将当前的key传进去 将数据也放进去 返回的就是当前的节点展开 都是true了

 

 

这俩方法都是我的枪手给我写的。。。。我。。。。