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

效果图(h5,小程序)


功能介绍

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

使用说明:

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

参数说明

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

props参数说明

参数 类型 是否必填 默认值 说明
label string name 指定选项标签为选项对象的某个属性值
children string children 指定选项的子选项为选项对象的某个属性值
multiple Boolean true 值为true时为多选,为false时是单选
checkStrictly Boolean false 在多选模式下,checkStrictly为false时,可让父子节点取消关联,选择任意一级选项。
nodes Boolean true 在单选模式下,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:点击跳转*

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

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

你可能感兴趣的:(vue,web,app,javascript,1024程序员节)