更新记录

4.2（2024-03-27）

1. 修复多选关联子级模式下搜索不显示选中问题
2. 新增弹窗选择模式demo
3. 优化代码

4.1.1（2023-07-03）

1. 修复搜索后路径不返回问题，props添加字段hasPath

4.1.0（2021-10-13）

1. 选中的值添加path路径，如小明在tree里面的第几层a-b-c-d 2.代码优化，排bug
2. 可以自定义key，即唯一的id

平台兼容性

置顶

定制开发、技术支持/咨询可以加我微信：122720267

多版本介绍

Vue3版本已上线，点击跳转

1.数据一次性返回uniapp版

2.异步数据，动态加载数据（多选不支持关联子级）

3.vue版，普通的vue组件（demo基于vue-cli，功能完整）

4. 原生js+html版（目前demo只支持单选）

一次性数据返回演示地址：点击跳转

异步加载版：点击跳转

其它树形结构：点击跳转

1. uniapp版本介绍

1.1功能介绍

1、多选: 支持多选任意多项，支持关联子级，仅选中子级，全选，半选状态

2、单选状态可以回显选中的位置路径

3、只需传checkList字段就可以回显默认选中，清空选择只需要清空checklist字段

使用示例

<xiaolu-tree  :checkList="checkList"  v-if="tree.length>0"  :props="prop" @sendValue="confirm"  :isCheck="true" :treeNone="tree"></xiaolu-tree>

图1 多项选择，选择任意多项

图2 多项选择，关联子级，支持全选，和取消全选，半选状态

2、单选

图1 可以选择任意一项或只能选择子项，选择后进入可以自动切换到选中页面的路径

参数说明

方法

props参数说明

props参数示例

    props: {//多项模式(任意选中多项)
        label: 'name',
        children: 'children',
        multiple:true
    },
    props: {//多项模式(关联子级)
        label: 'name',
        children: 'children',
        multiple:true,
        checkStrictly:true
    },
    props: {//单选模式(任意一项)
        label: 'name',
        children: 'children',
        multiple:false,
        nodes:false
    },
    props: {//单选模式选user
        label: 'name',
        children: 'children',
        multiple:false,
        nodes:true
    }*

`

传入的数据结构说明：

1. id，user字段必须，user'字段名不可更改，id的字段明可以通过传keyValue指定，user为true时说明没有子级，user未false时说明有子级（即children的长度不为0）

[
    {
        id: 664214366998,
        name: "校长443",
        user: false,
        children: [{
            id: 885655454545454545678,
            name: "小陆",
            user: true
        }]
    },
]

选中返回的结果checkList：返回一个二维数组

[
    {
        id: xxx,
        name: "xxx",
        user: false,
        path:[],//该值的路径
    },
]

常见问题

1.如何清空选中？

把checkList设为空即可
如checkList=[]

2.数据无法显示/或组件无法运行

请到GitHub上拉取完整的示例代码运行一遍，再导入自己的项目中

3. 多选关联子级没返回父级

多选并关联子级的模式下，只会返回user为true的用户，不返回含有子级的
可以通过返回的数据中的path路径获取父级

2. 动态加载数据版本（支持单选+多选（不关联子级）+展示）（未发布到插件市场的，付费组件50块，微信：122720267)

每一级都是动态请求数据，优化了数据量多的问题

参数说明

单选的效果图

3. 纯vue版本，付费组件50块，微信：122720267

该版本和插件市场上的版本功能一样，只不过它被改造为一个纯vue组件，可以在任意webpack项目或脚手架上跑。

4. 纯原生js+html版本，付费组件50块，微信：122720267

目前只支持单选，可以找我定制功能

5.结语

项目将持续维护更新，欢迎提建议