效果图(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();
}