ant vue 树形结构被选中数据数量统计

需求 树形结构展示数据 且数据可被选中 在数据后显示选中数量

测试数据

[
    {
        "title": "测试", 
        "key": 6, 
        "children": [
            {
                "title": "测试测试", 
                "key": "6-1", 
                "children": [
                    {
                        "title": "Band-测试", 
                        "key": "6-1-60", 
                        "scopedSlots": {
                            "title": "title"
                        }
                    }, 
                    {
                        "title": "Band1-Band1", 
                        "key": "6-1-61", 
                        "scopedSlots": {
                            "title": "title"
                        }
                    }
                ], 
                "scopedSlots": {
                    "title": "title"
                }, 
                "lengthNum": 2, 
                "allianceType": "children"
            }, 
            {
                "title": "测试测试1", 
                "key": "6-2", 
                "children": [
                    {
                        "title": "null-null", 
                        "key": "6-2-62", 
                        "scopedSlots": {
                            "title": "title"
                        }
                    }, 
                    {
                        "title": "Band-Band", 
                        "key": "6-2-63", 
                        "scopedSlots": {
                            "title": "title"
                        }
                    }
                ], 
                "scopedSlots": {
                    "title": "title"
                }, 
                "lengthNum": 2, 
                "allianceType": "children"
            }
        ], 
        "allianceType": "HEAD", 
        "scopedSlots": {
            "title": "title"
        }
    }, 
    {
        "title": "测试", 
        "key": 7, 
        "children": [
            {
                "title": "测试3", 
                "key": "7-4", 
                "children": [ ], 
                "scopedSlots": {
                    "title": "title"
                }, 
                "lengthNum": 0, 
                "allianceType": "children"
            }, 
            {
                "title": "测试3", 
                "key": "7-3", 
                "children": [
                    {
                        "title": "Band-Band", 
                        "key": "7-3-64", 
                        "scopedSlots": {
                            "title": "title"
                        }
                    }, 
                    {
                        "title": "Band-Band", 
                        "key": "7-3-65", 
                        "scopedSlots": {
                            "title": "title"
                        }
                    }
                ], 
                "scopedSlots": {
                    "title": "title"
                }, 
                "lengthNum": 2, 
                "allianceType": "children"
            }
        ], 
        "allianceType": "BRANCH", 
        "scopedSlots": {
            "title": "title"
        }
    }
]

vue代码

      <div>
        <a-input-search
          style="margin-bottom: 8px"
          placeholder="搜索用户组"
          @change="onChange"
        />
        <a-tree
          v-model="checkedKeys"
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          checkable
          :tree-data="gData"
          @expand="onExpand"
        >
          <template slot="title" slot-scope="title">
            <span v-if="title.title.indexOf(searchValue) > -1">
              {{ title.title.substr(0, title.title.indexOf(searchValue)) }}
              <span style="color: #f50">{{ searchValue }}</span>
              {{
                title.title.substr(
                  title.title.indexOf(searchValue) + searchValue.length
                )
              }}
              <span v-if="title.allianceType">
                ({{ statisticalSelection(title) }}/{{
                  title.allianceType !== "children"
                    ? title.children
                        .map((item) => item.lengthNum)
                        .reduce((a, b) => a + b)
                    : title.lengthNum
                    ? title.lengthNum
                    : 0
                }})</span
              >
            </span>
            <span v-else
              >{{ title.title }}
              <span v-if="title.allianceType">
                (({{ statisticalSelection(title) }}/{{
                  title.allianceType
                    ? title.children
                        .map((item) => item.lengthNum)
                        .reduce((a, b) => a + b)
                    : title.lengthNum || 0
                }})</span
              >
            </span>
          </template>
        </a-tree>
      </div>

js代码

//data里放
 gData: [],
 checkedKeys:[],
       expandedKeys: [],
      autoExpandParent: true,
//methods里放
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    statisticalSelection(title) {
      //遍历选中数组
      let num = 0;
      this.checkedKeys
        .map(item => {
          //是当前渲染时进入
          if (item == title.key) {
            //是爷进
            if (title?.allianceType !== "children") {
              return title.children
                .map(item => item.lengthNum)
                .reduce((a, b) => a + b);
            } else {
              //否则是儿
              console.log("儿子", item, title.key);
              return title.lengthNum;
            }
          } else {
            //选中子元素
            //爷进
            if (
              !this.checkedKeys.includes(title.key) &&
              title.allianceType !== "children"
            ) {
              console.log("爷爷判断儿子是否被选中");
              return title.children
                .map(cont => {
                  if (item == cont.key) {
                    console.log("选中了儿子");
                    return cont.lengthNum;
                  } else if (
                    !this.checkedKeys.includes(cont.key) &&
                    cont.children.map(item => item.key).includes(item)
                  ) {
                    console.log("孙子选中了");
                    return 1;
                  }
                  return 0;
                })
                .reduce((a, b) => {
                  return a + b;
                });
            } else if (
              !this.checkedKeys.includes(title.key) &&
              title.allianceType == "children"
            ) {
              if (title.children.map(item => item.key).includes(item)) {
                return 1;
              }
            }
          }
        })
        .filter(a => a)
        .map(item => {
          num += item;
        });
      return num;
    },
 //放vue外 js内
const getParentKey = (key, tree) => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};