listToTree

基本使用

转换前：

[
  {
    "id": "1",
    "title": "节点1",
    "parentId": ""
  },
  {
    "id": "1-1",
    "title": "节点1-1",
    "parentId": "1"
  },
  {
    "id": "2",
    "title": "节点2",
    "parentId": ""
  },
  {
    "id": "2-1",
    "title": "节点2-1",
    "parentId": "2"
  },
  {
    "id": "2-2",
    "title": "节点2-2",
    "parentId": "2"
  }
]

转换后：

[
  {
    "id": "1",
    "title": "节点1",
    "parentId": "",
    "children": [
      {
        "id": "1-1",
        "title": "节点1-1",
        "parentId": "1",
        "children": []
      }
    ]
  },
  {
    "id": "2",
    "title": "节点2",
    "parentId": "",
    "children": [
      {
        "id": "2-1",
        "title": "节点2-1",
        "parentId": "2",
        "children": []
      },
      {
        "id": "2-2",
        "title": "节点2-2",
        "parentId": "2",
        "children": []
      }
    ]
  }
]

vue

<template #component>
转换前：
<kn-format-json :data = "list" />
转换后：
<kn-format-json :data = "tree" />
</template>
<script setup>
import { listToTree,KnFormatJson } from 'knot-vue'
const list = [
  {
    id: '1',
    title: '节点1',
    parentId: '',
  },
  {
    id: '1-1',
    title: '节点1-1',
    parentId: '1'
  },
  {
    id: '2',
    title: '节点2',
    parentId: ''
  },
  {
    id: '2-1',
    title: '节点2-1',
    parentId: '2'
  },
  {
    id: '2-2',
    title: '节点2-2',
    parentId: '2'
  },
]
const tree = listToTree(list)

</script>

API

属性名	描述	类型	是否必填	默认值
第一个参数	扁平列表	Item[] 见下表	true	--
第二个参数	唯一标识字段名	string	true	id
第三个参数	子节点数组字段名	string	true	children
第四个参数	父节点唯一标识字段名	string	true	parentId

Item

属性名	描述	类型	是否必填	默认值
id	唯一标识	string	true	--
children	子节点数组	string	true	--
parentId	父节点唯一标识	string	true	--

listToTree ​

基本使用 ​

API ​

Item ​

listToTree

基本使用

API

Item