点击子节点才触发
想要实现这个功能,首先需要看点击这个节点下面是否存在节点,所以重点是需要拿到点击这个节点的node
,node
节点下面有一个 childNodes
集合,这个集合保存的就是子节点数据,如果这个集合里面没有数据,说明当前节点就是子节点。官网提供 getNode()
方法获取node
。
getNode
使用
需要在组件上指定 node-key
属性和ref
属性,这个属性必须和指定的label
值相同。
- 完整代码
<template>
<div>
<el-tree
:data="sideBarData"
ref="menuTree"
node-key="name"
:props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
sideBarData: [
{ name: "父节点", children: [{ name: "子节点", children: [] }] },
],
defaultProps: {
children: "children",
label: "name",
},
};
},
components: {},
methods: {
handleNodeClick(e) {
const a = this.$refs.menuTree.getNode(e.name);
if (a.childNodes.length === 0) {
console.log("子节点");
}
},
},
};
</script>
<style scoped>
</style>