elementUI中Tree 树形控件点击叶子节点才触发

点击子节点才触发

想要实现这个功能，首先需要看点击这个节点下面是否存在节点，所以重点是需要拿到点击这个节点的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>