el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点

在使用Element UI的el-tree组件时，如果需要实现只能勾选最后一层级的子节点以及查找树结构中的第一个无子节点的叶子节点，可以通过监听节点的点击事件并编写相应的逻辑来实现。

以下是实现这些功能的示例代码：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
    ref="tree"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        // 树形结构的数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data, node, self) {
      // 如果是叶子节点，则直接返回
      if (!node.childNodes || node.childNodes.length === 0) {
        this.selectLeafOnly(node);
        return;
      }
 
      // 阻止选中非叶子节点
      this.$refs.tree.setCurrentKey(null);
    },
    selectLeafOnly(node) {
      // 只选中最后一层级的叶子节点
      const path = node.path;
      for (let i = path.length - 1; i >= 0; i--) {
        const currentNode = this.$refs.tree.getNode(path[i]);
        if (currentNode && currentNode.childNodes && currentNode.childNodes.length > 0) {
          this.$refs.tree.setCurrentKey(currentNode.key);
          break;
        }
      }
    }
  }
};
</script>

在这个示例中，handleNodeClick方法用于处理节点点击事件。当点击节点时，如果它是叶子节点，则更新当前选中节点为该节点。如果它不是叶子节点，则清除当前选中节点。selectLeafOnly方法用于寻找并选中最后一层级的叶子节点。它通过节点的path属性从当前节点向上遍历，直到找到一个有子节点的节点作为当前选中项。