treetable无法动态添加子元素 数组合并后结构不符合预期

错误原因 #

原代码let r = nodes.concat({...children})的执行逻辑和需求完全不符：

1. 首先会将children数组展开为以数组下标为键的普通对象
2. 再把这个对象作为独立元素追加到nodes数组末尾
   所以最终只会得到平级的数组结构，无法实现子节点挂载到父节点下的嵌套效果。

调整方案 #

单父节点直接挂载（当前场景适用） #

你当前只有一个父节点存储在nodes数组首位，直接给该父节点添加children属性即可：

// 方式1：直接修改原nodes数组
nodes[0].children = children[0].children

// 方式2：不修改原数组，返回新的结果数组
const r = JSON.parse(JSON.stringify(nodes))
r[0].children = children[0].children

多父节点按key匹配挂载 #

如果后续有多个父节点需要对应挂载子节点，可以通过父节点key值匹配目标节点后再赋值：

// 替换为你要挂载的父节点key值
const parentKey = keyIndex.value
const targetParent = nodes.find(item => item.key === parentKey)

if (targetParent) {
  // 父节点没有children属性时先初始化
  if (!targetParent.children) targetParent.children = []
  // 合并子节点到父节点下
  targetParent.children.push(...children[0].children)
}

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