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)
          },

Logo

前往低代码交流专区

更多推荐