更新记录

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
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.5 app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

置顶

定制开发、技术支持/咨询可以加我微信: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 可以选择任意一项或只能选择子项,选择后进入可以自动切换到选中页面的路径

在这里插入图片描述

参数说明

参数 类型 是否必填 默认值 说明
treeNone Array [ ] 传入的树形结构数据,每个对象必须包含唯一的keyValue值
keyValue String id 唯一的key值,必须是唯一的才行(纯展示可不带)
searchIf Boolean true 是否开启搜索框
isCheck Boolean false 是否开启选择操作,值是false时仅展示,无操作
props Object {label:'name',children:'children'} 参数配置,详细见下表
checkList Array [] 默认选中值,根据id字段匹配
scrollHeight string 弹窗模式必传。滚动的盒子高度

方法

方法名 参数 说明
sendValue val val 接收选中的数据,数据类型为数组
props参数说明
参数 类型 是否必填 默认值 说明
label string name 指定选项标签为选项对象的某个属性值
children string children 指定选项的子选项为选项对象的某个属性值
multiple Boolean true 值为true时为多选,为false时是单选
checkStrictly Boolean false 需要在多选模式下才传该值,checkStrictly为false时,可让父子节点取消关联,选择任意一级选项。为true时关联子级,可以全选
nodes Boolean true 在单选模式下,nodes为false时,可以选择任意一级选项,nodes为true时,只能选择叶子节点
hasPath Boolean false 是否返回值的完整path
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)

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

参数说明

参数 类型 是否必填 默认值 说明
treeList Array [ ] 传入的树形结构数据,二维数据
getData Function - 获取数据的接口方法 ,详情看源码
props Object {check:true,multiple:false} check是否开启可选择,multiple是否是多选
value Array [] 默认选中值,根据id字段匹配

单选的效果图 在这里插入图片描述

3. 纯vue版本,付费组件50块,微信:122720267

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

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

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

5.结语

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问