vue 树列表中把根据pid添加到父级的children中，如果pid等于null或0则为顶级节点

在Vue.js中，树形列表通常涉及到递归组件和父子组件的数据传递。当你需要根据`pid`字段来组织数据，形成一个有层级结构的树形列表，并将顶级节点标记为`pid`为`null`或`0`的情况，你可以这样做：

1. 首先，在数据模型中，每个节点通常包含一个数组`children`用于存储其子节点，以及一个`pid`字段表示它的父节点ID。

data() {
  return {
    treeData: [
      { id: 1, pid: null, name: '根节点1', children: [] },
      { id: 2, pid: 1, name: '子节点1', children: [] }, // 父id为1
      { id: 3, pid: null, name: '根节点2', children: [] },
      { id: 4, pid: 3, name: '子节点2', children: [] } // 父id为3
      // 更多节点...
    ]
  }
}

2. 当获取服务器数据时，遍历数据并判断`pid`是否为`null`或`0`，将其设置为顶级节点。如果是其他值，则添加到对应父节点的`children`数组里。

methods: {
  fetchData() {
    const result = ...// 获取实际数据
    this.treeData = result.map(item => ({
      ...item,
      children: item.pid === null || item.pid === 0 ? [] : this.treeData.find(node => node.id === item.pid)?.children || []
    }));
  }
}

3. 初始化完成后，可以调用`fetchData`方法，然后通过`v-for`指令渲染列表，同时递归展示子节点。

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      {{ node.name }}
      <ul v-if="node.children.length > 0">
        <li v-for="child in node.children">{{ child.name }}</li>
      </ul>
    </li>
  </ul>
</template>