获取el-tree中所有的子节点

8 篇文章 0 订阅
3 篇文章 0 订阅

vue组件中的el-tree

<template>
<el-tree ref="tree" :data="data" :current-node-key="0" node-key="id" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>

//获取所有节点方法1

          getCheckedAll:function(e){

           return this.tree.filter(function (e) {
              if(e.node.indeterminate){
                  return e.node.indeterminate
              }
              return e.node.checked
          }).map(function (e) {
          //map高阶函数处理map之前的数据并将处理好的数据返回一个新的数组
              return e.node
          })

          },
 //获取树列表的所有节点
          getTreeNodeIDList(ParentNode){
            var AllNode = new Array()//存储节点用的数组
            for(var i=0;i<ParentNode.length;i++){//第一级子节点3个
              AllNode.push(ParentNode[i].$treeNodeId)
                for(var j=0;j<ParentNode[i].children.length;j++){//第二级子节点
                  AllNode.push(ParentNode[i].children[j].$treeNodeId)
                    for(var k=0;k<ParentNode[i].children[j].children.length;k++){//第三级子节点
                      AllNode.push(ParentNode[i].children[j].children[k].$treeNodeId)
                    }
                }
            }
            return AllNode
          },

          //点击树列表就触发发送数据函数,
          handleNodeClick(data)  {
            //所有树节点
            var AllNode = this.$refs.tree.getNode(1)

            //当前选中的节点
            var  getCurrentNode= this.$refs.tree.getCurrentNode()

            //所有的父节点数据
            var ParentNode = AllNode.parent.data

            //树列表的所有节点
            var TreeAllNode = this.getTreeNodeIDList(ParentNode)

            //向需要数据的组件传送数据
            bus.$emit('send', data,ParentNode,getCurrentNode,TreeAllNode)
          },

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是一个获取 el-tree 所有子节点的 demo: ```html <template> <el-tree :data="data" :props="defaultProps"> <span class="custom-tree-node" slot-scope="{ node, data }"> {{ data.label }} <el-button @click="getAllChildren(node)">获取子节点</el-button> </span> </el-tree> </template> <script> export default { data() { return { data: [ { label: "一级 1", children: [ { label: "二级 1-1", children: [ { label: "三级 1-1-1" }, { label: "三级 1-1-2" } ] }, { label: "二级 1-2", children: [ { label: "三级 1-2-1" }, { label: "三级 1-2-2" } ] } ] }, { label: "一级 2", children: [ { label: "二级 2-1", children: [ { label: "三级 2-1-1" }, { label: "三级 2-1-2" } ] }, { label: "二级 2-2", children: [ { label: "三级 2-2-1" }, { label: "三级 2-2-2" } ] } ] } ], defaultProps: { children: "children", label: "label" } }; }, methods: { getAllChildren(node) { console.log(node.childNodes); } } }; </script> ``` 在这个 demo ,我们通过给每个节点添加一个按钮,来触发获取子节点的操作。具体实现方式是在 el-tree 添加一个 slot,并为按钮绑定一个击事件,击事件调用 `getAllChildren` 方法,方法获取当前节点的所有子节点并打印到控制台。 这个 demo 的核心代码如下: ```html <span class="custom-tree-node" slot-scope="{ node, data }"> {{ data.label }} <el-button @click="getAllChildren(node)">获取子节点</el-button> </span> ``` ```javascript getAllChildren(node) { console.log(node.childNodes); } ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值