{ "createBy": "13774", "createTime": "2023-05-22 16:48:21", "updateBy": "13774", "updateTime": "2023-05-22 17:32:17", "remark": null, "id": 13774, "userId": 13774, "extendOne": 13775, "extendTwo": 13776, "extendThree": 13777, "isLeader": null, "extendId": null, "userExtendThree": { "createBy": "", "createTime": null, "updateBy": "", "updateTime": null, "remark": null, "id": 13777, "userId": 13777, "extendOne": 13778, "extendTwo": 13779, "extendThree": 13780, "isLeader": null, "extendId": null, "userExtendThree": null } }; 你好帮我把这段数据用树状结构图画出来，使用，uni-app代码---extendOne，extendTwo，extendThree。 分别代码父亲的三个兄弟， userExtendThree对象里面的 extendOne，extendTwo，extendThree。 代表她的孩子， userExtendThree 下一级如果还有就代表孙子，以此论推的。

把这段数据转换成树状结构图如下所示：

- id: 13774
  - extendOne: 13775
    - id: 13775
    - extendOne: null
    - extendTwo: null
    - extendThree: null
    - userExtendThree: null
  - extendTwo: 13776
    - id: 13776
    - extendOne: null
    - extendTwo: null
    - extendThree: null
    - userExtendThree: null
  - extendThree: 13777
    - id: 13777
    - extendOne: 13778
      - id: 13778
      - extendOne: null
      - extendTwo: null
      - extendThree: null
      - userExtendThree: null
    - extendTwo: 13779
      - id: 13779
      - extendOne: null
      - extendTwo: null
      - extendThree: null
      - userExtendThree: null
    - extendThree: 13780
      - id: 13780
      - extendOne: null
      - extendTwo: null
      - extendThree: null
      - userExtendThree: null
      - userExtendThree: null

以下是使用 uni-app 代码来实现：

<!-- template -->
<template>
  <view class="content">
    <tree :data="treeData" :props="props"/>
  </view>
</template>

<!-- script -->
<script>
export default {
  data() {
    return {
      treeData: {
        id: 13774,
        extendOne: {
          id: 13775,
          extendOne: null,
          extendTwo: null,
          extendThree: null,
          userExtendThree: null
        },
        extendTwo: {
          id: 13776,
          extendOne: null,
          extendTwo: null,
          extendThree: null,
          userExtendThree: null
        },
        extendThree: {
          id: 13777,
          extendOne: {
            id: 13778,
            extendOne: null,
            extendTwo: null,
            extendThree: null,
            userExtendThree: null
          },
          extendTwo: {
            id: 13779,
            extendOne: null,
            extendTwo: null,
            extendThree: null,
            userExtendThree: null
          },
          extendThree: {
            id: 13780,
            extendOne: null,
            extendTwo: null,
            extendThree: null,
            userExtendThree: null
          },
          userExtendThree: null
        }
      },
      props: {
        label: 'id',
        children: ['extendOne', 'extendTwo', 'extendThree'],
        hasChildren: (data) => data.extendOne || data.extendTwo || data.extendThree
      }
    }
  }
}
</script>