elementui tree组件 getNode分析

elementui tree组件 getNode分析
https://blog.csdn.net/CSTGxun/article/details/119885129
当我们调用getNode方法实际执行的是上图的方法，首先判断了data对象，是传入了key值还是node对象，如果传入的是一个node对象则可以直接返回数据，接着判断传入的data是不是一个对象，如果是key值就从nodesMap中找对应的数据，如果是一个对象则执行getNodeKey，这里的this指向是TreeStore，存储了一下tree的配置信息，由下图可知这里this.key传入的是一个字符串id。

在使用element-ui的tree组件时使用getNode想要获取节点，我使用了getNode()方法来获取节点，方法传入参数是node节点id，可以通过方法获取到初始化节点但是懒加载的节点获取不到，之后浏览了文档发现getNode传入的参数是key值或者节点node而不是id，节点的id是组件自动生成的（我可以通过id来获取初始化节点是因为项目中id和key值相同）。

在浏览文档之前我先看了一下element的源码，下面是部分源码分析。

源码分析：当我们调用getNode方法实际执行的是上图的方法，首先判断了data对象，是传入了key值还是node对象，如果传入的是一个node对象则可以直接返回数据，接着判断传入的data是不是一个对象，如果是key值就从nodesMap中找对应的数据，如果是一个对象则执行getNodeKey，这里的this指向是TreeStore，存储了一下tree的配置信息，由下图可知这里this.key传入的是一个字符串id。

 

getNodeKey接收了key和data，由上面可知道key是一个字符串id，如果data是一个传入的非Node的对象，如果我们在tree组件中没有设置node-key属性，这里会执行if语句直接返回data[NODE_KEY]是一个undefined的值，在getNode()方法中key接收的是一个undefined，从nodesMap中取一个undefined还是undefined，最终返回null，这也是我们在组件中调用getNode方法为什么会获取到null值的原因，如果我们传入的是对象里可以通过data['id']来获取到一个值就可以从nodesMap中获取到对应的数据。

 

demo代码：

<template>
  <div>
    <!--        node-key="id"-->
    <el-tree
        ref="myTree"
        :load="loadNode"
        :data="treeData"
        node-key="id"
        lazy
        @node-click="handleNodeClick"
        show-checkbox>
    </el-tree>
    <el-button @click="getNode">获取节点</el-button>
  </div>
</template>
 
<script>
import {treeData} from "./index.js";
 
export default {
  name: "index.vue",
  data() {
    return {
      treeData: [],
      nodeId: 0,
      myNode: null
    };
  },
  mounted() {
    this.treeData = treeData;
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data, node) {
      this.nodeId = node.id;
      this.myNode = node;
      console.log( node);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return ;
        // return resolve([{ name: 'region' }]);
      }
      if (node.level < 3){
        return resolve(node.data.children);
      }else {
        if (node.level == 3){
          let pomise = [
            {
              id: 1,
              label: '平湖街道',
            }
          ];
          node.data.children = pomise;
          resolve(pomise)
        }
      }
 
    },
    getNode(){
      console.log(this.$refs.myTree.getNode({
        id: 1000,
        label: '广东省',
        children: [
          {
            id: 1100,
            label: '深圳市',
            children: [
              {
                id: 1110,
                label: '龙岗区'
              }
            ]
          }
        ]
      }))
    }
  },
 
}
</script>
 
<style scoped>
 
</style>

js:

export const treeData = [
    {
        id: 1000,
        label: '广东省',
        children: [
            {
                id: 1100,
                label: '深圳市',
                children: [
                    {
                        id: 1110,
                        label: '龙岗区'
                    }
                ]
            }
        ]
    },
    {
        id: 2000,
        label: '湖南省',
        children: [
            {
                id: 2100,
                label: '长沙市',
                children: [
                    {
                        id: 2110,
                        label: 'XXX区',
                    }
                ]
            }
        ]
    },
]