elementui tree组件 getNode分析
在使用element-ui的tree组件时使用getNode一直获取不到节点,原来是传入参数有问题,之前是使用节点id获取节点,根据element文档表示需要传入节点key或者data才可以获取到节点,之前以为是懒加载的缘故导致节点获取不到。源码分析:getNode函数接收data参数,首先判断data是否是一个node对象,如果是可以直接返回这个节点,如果否,判断key是否是一个object,如
在使用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区',
}
]
}
]
},
]
更多推荐
所有评论(0)