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区',
- }
- ]
- }
- ]
- },
- ]