更新记录

1.1.2（2024-04-02）

更新组件demo

1.1.1（2024-04-02）

完善文档说明

1.1.0（2024-04-02）

增加加载下一级的loading 动画效果,晚上readme 的文档

平台兼容性

network-tree

简介

一个很简单的无限向下展开的tree 结构，主要业务应用于（直销）上下级人员关系展示，只有展开收起功能 ，支持动态加载数据。 （只测试了 H5 和微信小程序 ，代码比较简单 ，应该通用所有平台是用的时候 自行修改代码按业务需要调整即可）

数据类型 简介

    interface ITreeItem {
        id : string  // 必有参数
        name : string // 
        card_id : string
        head_image : string
        star : number
        level : number
        has_next : boolean //  必有参数 需要用来判断是否有下一级
        is_loading?:boolean //  逻辑追加信息 用来控制下一级加载的显示
        is_expanded ?: number // 逻辑追加信息 用来判断是否显示展开和关闭按钮 无需维护
        children : ITreeItem[] | [] // 下一级容器 
    }

使用demo

    const treeList = ref([{
    id: '1',
    name: 'zhangsan1',
    card_id: '2342342445',
    head_image: 'https://img1.baidu.com/it/u=2876200066,1063313120&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
    star: 1,
    level: 2,
    has_next: true,
    children: [{
        id: '11',
        name: 'li1',
        card_id: '1111111',
        head_image: 'https://img0.baidu.com/it/u=4012307479,1652345218&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
        star: 1,
        level: 2,
        has_next: false,
        children: []
    },
    {
        id: '112',
        name: 'li2',
        card_id: '1111112',
        head_image: 'https://img0.baidu.com/it/u=4012307479,1652345218&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
        star: 1,
        level: 2,
        has_next: true,
        children: []
    }
    ]
}, {
    id: '2',
    name: 'zhangsan2',
    card_id: '2342342445',
    head_image: 'https://img1.baidu.com/it/u=2876200066,1063313120&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
    star: 1,
    level: 2,
    has_next: true,
    children: [{
        id: '22',
        name: 'zhangsan22',
        card_id: '23423423',
        head_image: 'https://img0.baidu.com/it/u=4012307479,1652345218&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
        star: 1,
        level: 2,
        has_next: false,
        children: []
    }]
}])

  <!-- 模板 -->
  <network-tree :treeList="treeList"></network-tree>

动态加载说明

• 因为子组件的递归自身操作，需要用provide 进行子组件 方法传递
• onLoadNext 最好是用 async 同步方式

  
  //父组件
  provide('onLoadNext', onLoadNext)