Antd的Tree 树形控件实现单选与获取选中后的父元素目录

Antd的Tree 树形控件实现单选与获取选中后的父元素目录

实现目标：

a-tree在使用时，需求有单选的功能，以及在选中后，获取子元素的父元素名称及信息，而antd 组件给定的方法中，并不能够直接获取父元素信息，官网的解释是出于性能考虑。

实现过程

        <a-tree v-model="checkedKeys" checkable :auto-expand-parent="autoExpandParent" 
        :selected-keys="selectedKeys"  :tree-data="treeData" @check="onCheck" 
        :replaceFields="replaceFields" />

oncheck方法是目录树自带的，在点击复选框时触发，主要是先获取到check函数的info对象，info对象中有很多内容，我们需要的内容有：
info：

1. checked：是否选择项，为true时选中，可以操作数据存入，为false时未选中或取消选中，此时可做单选数组的清空
2. checkedNodes：获取到的子节点信息 ，包括有：data：子节点所有的信息都能在data中找到，一般 存在data.props中
3. checkedNodesPositions：数组形式存储选中的子节点位置数组的最后一位，永远是存放刚刚勾选的子节点 的，[包括有：pos：按照所 在数组的索引来分，格式为0-0-0的格式，所以我们在使用pos获取父元素位置时，需要先按照“-”来分割字符串，获取到位置数组]

  //目录树选中节点
    onCheck(checkedKeys, info,) {
      // 单选模式
      if (this.parentTreecheckedKeys.type == "single") {
        if (info.checked) {
          // 选中时子目录的id与名称
          this.checkedKeys = [].concat(
            checkedKeys[checkedKeys.length - 1])
          this.objSingleData.checkedName =
            info.checkedNodes[info.checkedNodes.length - 1].data.props.text;
            
            
          // 获取父目录名称
          let length = info.checkedNodesPositions.length //获取选中的子目录存储位置长度
          let popArr = info.checkedNodesPositions[length - 1].pos.split("-") //获取选中的子目录所在位置并切割成数组
          popArr.shift()
          this.objSingleData.checkedParentName = this.getParentNodes(popArr, this.treeData)
        } else {
             this.objSingleData.checkedId  = []
          this.objSingleData.checkedName = "";
          this.objSingleData.checkedParentName = ''
        }
        return false;
      }
       }

   // 获取父目录  nodesArr为节点位置数组，treeData为目录树数据
    getParentNodes(nodesArr, treeData) { //
      let node = []
      let objParentNodes = "" //存放父节点名称
      node = treeData[nodesArr[0]].ChildNodes[nodesArr[1]]   //这里的逻辑可根据需求写成循环获取，
      objParentNodes = node.text
      return objParentNodes
    },