写一个ts方法，获取一个树里面的单个节点

假设每个树节点的数据结构为：

interface TreeNode {
  value: any;
  children: TreeNode[];
}

可以使用递归方法来获取树中某个节点：

function getNode(tree: TreeNode, targetValue: any): TreeNode | null {
  if (tree.value === targetValue) {
    return tree;
  }
  for (let i = 0; i < tree.children.length; i++) {
    const node = getNode(tree.children[i], targetValue);
    if (node) {
      return node;
    }
  }
  return null;
}

该方法接受两个参数，第一个参数为树的根节点，第二个参数为要查找的节点的值。如果找到了该节点，则返回该节点，否则返回 null。

相关问题

写一个ts方法，实现获取一个tree里面单个节点的所有父节点

假设我们的树节点数据结构如下：

interface TreeNode {
  id: string;
  parentId?: string;
  children?: TreeNode[];
}

可以先定义一个 `findNodeById` 方法，用于根据节点 id 查找节点：

function findNodeById(node: TreeNode, id: string): TreeNode | undefined {
  if (node.id === id) {
    return node;
  } else if (node.children) {
    for (const child of node.children) {
      const found = findNodeById(child, id);
      if (found) {
        return found;
      }
    }
  }
  return undefined;
}

然后定义一个 `getParents` 方法，用于获取一个节点的所有父节点：

function getParents(tree: TreeNode[], nodeId: string): TreeNode[] {
  const node = findNodeById(tree[0], nodeId); // 假设根节点总是在 tree 的第一个元素
  if (!node) {
    return [];
  }
  const parents: TreeNode[] = [];
  let parent = findNodeById(tree[0], node.parentId!);
  while (parent) {
    parents.unshift(parent); // 将父节点插入到数组的开头
    parent = findNodeById(tree[0], parent.parentId!);
  }
  return parents;
}

使用示例：

const tree: TreeNode[] = [
  {
    id: '1',
    children: [
      {
        id: '2',
        parentId: '1',
        children: [
          {
            id: '4',
            parentId: '2',
          },
        ],
      },
      {
        id: '3',
        parentId: '1',
        children: [
          {
            id: '5',
            parentId: '3',
          },
        ],
      },
    ],
  },
];

const parentsOf5 = getParents(tree, '5'); // [{ id: '3', parentId: '1', children: [...] }, { id: '1', children: [...] }]

el-cascader父只获取选中节点

### 实现 Element Plus 级联选择器仅返回父级选中的节点值

为了实现这一功能，在配置 `el-cascader` 组件时可以利用其属性来控制行为。具体来说，通过设置 `props.emitPath=false` 可以让组件只返回最终选中的叶子节点路径上的最后一个节点或是被直接点击的父节点，而不是整个路径。

下面是一个具体的例子展示如何配置：

<template>
  <div>
    <!-- 使用 emitPath 控制输出 -->
    <el-cascader
      :options="options"
      v-model="selectedValue"
      :props="{ checkStrictly: true, emitPath: false }"
      clearable></el-cascader>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 假设这是你的选项数据结构
const options = [
  {
    value: 'zhinan',
    label: '指南',
    children: [
      {
        value: 'shejiyuanze',
        label: '设计原则'
      },
      {
        value: 'daohang',
        label: '导航'
      }
    ]
  }];

// 存储当前的选择项
const selectedValue = ref([]);
</script>

在这个实例中，当用户选择了某个子项或父项时，绑定到 `v-model` 的变量只会记录下该次操作所对应的单个节点值而非完整的层级路径[^1]。