Ant Design Vue Tree 树形获取父节点信息

有幸用过这个ant组件  一言难尽!! 了解到这个组件默认不透露父节点信息 所以处理是真的麻烦 ,我这个需求是选中子节点要把它的父节点展示出来!开始用了很多捷径都没成功,最后用循环加递归踏踏实实的去找到它的父节点

 代码段:html

  <a-tree
              v-if="treeData.length"
              show-search
              :checkedKeys="checkedKeys"
              :treeData="treeData"
              checkable
              :selectable="false"
              v-model="selectedKeys"
              @select="onSelect"
              @check="onCheck"
            >
              <template slot="name" slot-scope="{ name }">
                <span v-html="name.replace(new RegExp(searchValue, 'g'), '<span style=color:#f50>' + searchValue + '</span>')"></span>
              </template>
            </a-tree>

js数据源

 data() {
    return {
      checkedKeys: [],
      checkedList:[],
      selectedKeys: [],
      searchValue: '',
      treeData: [
        {
            id:"0",
          name: '下管街道',
          key: '0',
          scopedSlots: { title: 'name' },
          checkable: false,
          children: [
            {
              name: '金星社区',
              key: '0-0',
               id:"00",
              scopedSlots: { title: 'name' },
              checkable: false,
              children: [
                {
                    id:"000",
                  name: '张三-网格员',
                  key: '0-0-0',
                  scopedSlots: { title: 'name' },
                },
                {
                    id:"001",
                  name: '李四-市容管理网格员',
                  key: '0-0-1',
                  scopedSlots: { title: 'name' },
                },
                {
                    id:"002",
                  name: '王五-网格员',
                  key: '0-0-2',
                  scopedSlots: { title: 'name' },
                },
                {
                    id:"003",
                  name: '赵四-环卫网格员',
                  key: '0-0-3',
                  scopedSlots: { title: 'name' },
                },
              ],
            },
            {
              name: '和平社区',
              key: '0-1',
              id:"01",
              scopedSlots: { title: 'name' },
              checkable: false,
              children: [
                {
                    id:"010",
                  name: '刘琴-网格员',
                  key: '0-1-0',
                  scopedSlots: { title: 'name' },
                },
                {
                    id:"011",
                  name: '王雪-市容管理网格员',
                  key: '0-1-1',
                  scopedSlots: { title: 'name' },
                },
                {
                    id:"012",
                  name: '李梅-环卫网格员',
                  key: '0-1-2',
                  scopedSlots: { title: 'name' },
                },
              ],
            },
          ],
        },
      ],
      checkedKeys:[],
      searchStr: '',
    }
  },

js:

//获取父节点
    onCheck(checkedKeys) {
        var tempArr = [];
        if(this.checkedKeys.length>0){
            console.log(this.checkedKeys[0].split("-"))
            for(let a=0;a<this.checkedKeys.length;a++){
                var tempA =  this.checkedKeys[a].split("-");
                var index = 0;
                var tempStr = "";
                var data = this.treeData[0];
                var id = 0;
                var temFuc = ()=>{
                    index++;
                    if(tempA.length-index>=0){
                        console.log(index)
                        if(tempStr){
                            tempStr = tempStr+"-"+data.name;
                        }else{
                            tempStr = data.name;
                        }
                        if(data.children){
                            data = data.children[tempA[index]];
                        }else{
                            id = data.id;     
                        }
                        temFuc();
                    }
                }
                temFuc();
                tempArr.push({
                    text:tempStr,
                    keys:this.checkedKeys[a],
                    id:id
                })
            }
            this.checkedList = tempArr;
        }
       console.log(this.checkedKeys)
    },

可以拿到以下俩组数据:

 

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值