如何将现有树结构转换为v-treeview适配格式及递归报错排查

核心问题点 #

• 你的createTree方法没有显式返回值，给children赋值this.createTree(element.children)时，拿到的是函数默认返回的undefined，这是children属性为空的直接原因
• 原实现直接往全局的this.datatree中push所有节点，递归处理子层级时，子节点也会被塞到根级的datatree数组里，最终树结构会错乱，所有节点都会平铺在根层级

修正后的实现 #

export default {
  data() {
    return {
      datatree: [],
      // 此处存放你的原始树结构数据
      items: [/* 原始源数据 */]
    }
  },
  methods: {
    createTree(items) {
      // 维护当前层级的节点数组，不直接操作全局变量
      const currentLevelNodes = []
      items.forEach(element => {
        const newNode = {
          id: element.data[0].id,
          name: element.data[0].name,
          // 递归处理子节点，无后代时默认赋值空数组
          children: element.children.length ? this.createTree(element.children) : []
        }
        currentLevelNodes.push(newNode)
      })
      // 返回当前层级的节点数组，供上层节点的children属性接收
      return currentLevelNodes
    }
  },
  mounted() {
    // 接收递归生成的完整树结构
    this.datatree = this.createTree(this.items)
    console.log("最终生成的树结构：", this.datatree)
  }
}

逻辑说明 #

• 每次递归仅处理当前传入的层级节点，生成对应的新节点数组后返回给上层调用
• 移除了对全局this.datatree的直接写入操作，避免子节点被错误插入根层级
• 函数显式返回当前层级节点数组，上层节点的children属性可以拿到正确的子节点集合，不会出现undefined问题

内容的提问来源于stack exchange，提问作者Jonh wick