uniapp无限级树形结构组件,多选组件,支持搜索,无限级面包屑类型导航

效果图(h5,小程序)

在这里插入图片描述
在这里插入图片描述

功能介绍

1、支持单选和多选(选中返回的格式均为数组),多级,面包屑导航栏

使用说明:

1、引入组件
2. 注册组件
3. 在页面引用组件

参数说明

参数类型是否必填默认值说明
treesArray[ ]传入的数据,见下面的例子
childrenstringchildren指定选项的子选项为选项对象的某个属性值
searchIfBooleantrue是否开启搜索框
isCheckBooleantrue是否开启选钟操作,多选
propsObject{label:‘name’,children:‘children’}参数配置,详细见下表

props参数说明

参数类型是否必填默认值说明
labelstringname指定选项标签为选项对象的某个属性值
childrenstringchildren指定选项的子选项为选项对象的某个属性值
multipleBooleantrue值为true时为多选,为false时是单选
checkStrictlyBooleanfalse在多选模式下,checkStrictly为false时,可让父子节点取消关联,选择任意一级选项。
nodesBooleantrue在单选模式下,nodes为false时,可以选择任意一级选项,nodes为true时,只能选择叶子节点

传值示例

				//多选模式(选择任意一项)
				aprop: {
					label: 'name',
					children: 'children',
					multiple:true
				},
				//多选模式(关联下级)
				bprop: {
					label: 'name',
					children: 'children',
					multiple:true,
					checkStrictly:true
				},
				//单选模式(任意一项)
				cprop: {
					label: 'name',
					children: 'children',
					multiple:false,
					nodes:false
				},
				//单选(只选user
				dprop: {
					label: 'name',
					children: 'children',
					multiple:false,
					nodes:true
				}

//数据格式
					tree:[{
							children: [],//都需要带这个
							id: "128334455556667681",
							name: "学生2104",
							checked: false,
							user: false
						}]
						```

**注意:单选和多选都是以数组传值**
## 方法
|方法名| 参数 |说明|
|--|--|--|
| sendValue | val | val 接收选中的数据|

## 必看:
 trees数据需要带有checked字段
 数据的id是唯一的id
默认选中需要传checkList,并调用checks方法

## 获取选中的值(重要)

```bash
		<tree :checkList="checkList"  :props="prop" @sendValue="confirm" :isCheck="true" :trees="tree" />
			//获取选中的
			confirm(val) {
				this.checkList=val
			},

点击确认返回第一个页面时传出选中的值(包含小程序和h5的传值方法)

·获取的数据返回的是一个数组,包含一个选中的对象的所有字段,若只需要某个字段,遍历一下就好

		backConfirm(){
			var pages = getCurrentPages();
			var currPage = pages[pages.length - 1]; //当前页面
			var prevPage = pages[pages.length - 2]; //上一个页面
			//h5写法
			prevPage.query =this.checkList
			//小程序写法
			//prevPage.$vm.query =this.checkList
			uni.navigateBack();
		}

特别提醒:不要直接导入组件到hbuilder,建议直接下载示例代码,git上不一定是最新的

获取组件地址

插件市场:点击跳转
GitHub:点击跳转*

若支持的人多了,将继续持续维护和开发

在这里插入图片描述

  • 7
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值