如何为v-treeview设置多个item-children属性适配不同层级子节点字段

结论 #

原生v-treeview的item-children属性仅支持传入单个字符串，无法直接设置多个值对应不同层级的子节点字段。

推荐解决方案：预处理数据统一子节点字段 #

你可以通过递归函数把不同层级的子节点字段统一为同一个名称，之后直接绑定该名称到item-children即可：

// 原始数据
const originalItems = [
  {
    id: 1,
    name: 'value1',
    item_nested: [
      {
        id: 2,
        name: 'value2',
      },
      {
        id: 3,
        name: 'value3',
        nested_item: [
          {
            id: 4,
            name: 'value4'
          }
        ]
      }
    ]
  }
]

// 递归归一化树结构数据
function normalizeTree(items) {
  return items.map(item => {
    // 适配不同层级的子节点字段
    const rawChildren = item.item_nested || item.nested_item || []
    return {
      ...item,
      // 统一子节点字段为children
      children: normalizeTree(rawChildren)
    }
  })
}

const normalizedItems = normalizeTree(originalItems)

之后在组件中直接使用处理后的数据即可：

<v-treeview
  :items="normalizedItems"
  item-children="children"
  item-key="id"
  item-label="name"
/>

其他可选方案 #

如果不想修改原始数据，也可以通过v-treeview的节点作用域插槽自定义子节点渲染逻辑，手动读取对应层级的子节点字段，但该方案实现成本高于数据预处理，更推荐优先用数据归一化的方案。

内容的提问来源于stack exchange，提问作者Michel Gisenäel