vue中树形结构的数据通过key获取value

在Vue中，如果你需要从树形结构的数据中通过某个键（key）获取对应的值，特别是在递归遍历树形数据时，可以利用Vue的响应式特性。假设你有一个如下的树形数据结构：

data() {
  return {
    treeData: [
      { id: 1, name: 'Parent 1', children: [{ id: 2, name: 'Child 1' }, { id: 3, name: 'Child 2' }] },
      { id: 4, name: 'Parent 2', children: [] }
    ]
  }
}

你可以通过递归函数来查找指定id的节点并获取其值，例如：

getTreeNodeById(key) {
  for (let node of this.treeData) {
    if (node.id === key) {
      return node;
    } else if (node.children && node.children.length > 0) {
      const foundNode = this.getTreeNodeById(key, node.children);
      if (foundNode) {
        return foundNode;
      }
    }
  }
  // 如果未找到，则返回null 或者 undefined
  return null;
}

// 使用示例
const childNodeValue = this.getTreeNodeById(2)?.name; // 获取id为2的子节点名称

这里的`getTreeNodeById`函数首先检查当前节点是否匹配，如果没有则会进入递归部分，继续查找子节点。