间接上效果图
性能介绍
1、反对单选和多选（选中返回的格局均为数组），多级组织
更新日志
2.0.0（2020-11-18）
1、修复多选不能用问题 2、修复面包屑不会主动置右的问题，3修复数据初始失败问题
1.2.2（2020-10-24）
1.增加单选模式下抉择叶子节点属性，nodes，为true时只能抉择叶子节点，为false时，能够抉择任意一项
应用阐明：
1、引入组件import tree from '@/components/xiaolu-tree/tree.vue';
- 注册组件
- 在页面援用组件
参数阐明
| 参数 | 类型 | 是否必填 | 默认值 | 阐明 |
|---|---|---|---|---|
| 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时），可让父子节点勾销关联，抉择任意一级选项。 |
留神：单选和多选都是以数组传值
办法
| 办法名 | 参数 | 阐明 |
|---|---|---|
| sendValue | val | val 接管选中的数据 |
留神:
trees数据须要带有checked字段
默认选中须要传checkList
并调用checks办法
获取选中的值（重要）
<tree :checkList="checkList" v-if="tree.length>0" :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();
}获取组件地址
插件市场：点击跳转
GitHub：点击跳转
结语：老手第一次插件，写法比拟low，望各位大佬多包涵。有不足之处欢送指出。
码
发表回复