性格左右命运，气度影响格局。——余世雅博士
插件地址：https://ext.dcloud.net.cn/plugin?id=5718
作者： luyj
介绍：
无限极树形结构。支持搜索、面包屑导航、单项选择、多项选择。
代码块
luyj-tree内包含luyj-tree-search、luyj-tree-navigation、luyj-tree-item说明
- 本插件是基于xiaolu-tree进行了uni_modules模块化。并进行了一些修改。
- 本人暂时只在微信小程序端和H5 使用Chrome浏览器测试。更改了一些内容，有可能会有一些错误 或说明与实际不一致，介意者慎用。本人会适当的抽出业余时间，把它完善，毕竟有一定的下载量了，而且自己也需要学习，再次感谢原作者。
- 暂时，使用自定义插件渲染有问题，会出现
duplication is found under a single shadow root. The first one was accepted，还未找到解决方案。安装方式
本组件符合easycom规范，
HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。基本用法
在
template中使用组件
复制代码<!-- 基础用法 --> <luyj-tree v-slot:default="{item}" :max="max" :trees="tree"> <!-- 内容插槽 --> <view> <view class="content-item"> <view class="word">{{item.name}}</view> </view> </view> </luyj-tree> 复制代码import dataList from '@/common/data.js'; // 引用数据 export default { data() { return { tree: dataList, max: 5, } }, }
功能说明
- 树形结构展示。
- 包含搜索框。能够自定义搜索框的样式,能够直接搜索树形图、子文件的内容。
- 包含面包屑导航。
- 可以仅仅展示或选择树形的项内容。
- 可以显示选择改变，或确认选择的方法。
- 只需传checkList字段就可以回显默认选中。
- 支持自定义显示内容的插件（slot)。
- 支持懒加载。
属性
| 属性名 | 类型 | 默认值 | 说明 |
| search-if | Boolean | true | 是否开启搜索 |
| search-background-color | String | #FFFFFF | 搜索框背景色 |
| search-input-background-color | String | #EEEFF0 | 搜索框的输入框背景色 |
| search-radius | Number | 40 | 搜索框的圆角值，单位rpx（默认40） |
| search-placeholder | String | 搜索 | 搜索框的内容物空时提示内容 |
| search-placeholder-style | String | 搜索框的placehoder的样式 | |
| search-maxlength | Number | 140 | 搜索框的最大输入长度 ,设置为 -1 的时候不限制最大长度 |
| search-iconColor | String | 搜索框的图标颜色 | |
| search-clearable | Boolean | true | 搜索框是否显示清除按钮 |
| trees | Array | [] | trees 传入的树形结构，每个对象必须包含唯一的id值 |
| is-check | Boolean | false | 是否开启选择操作 |
| slot-obj | Object | null | 传入插槽的参数（自定义的slot中不能引用页面的参数，否则样式会出错） |
| check-list | Array | [] | 选中的列表 |
| parent | Boolean | false | 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)。此参数占时失效。 |
| parent-list | Array | [] | 父级列表 |
| check-active-color | String | #00AAFF | 选中时单选框/复选框的颜色 |
| check-none-color | String | #B8B8B8 | 未选中时单选框/复选框的颜色 |
| props | Object | {id: ‘id’,label:‘name’,children:‘children’，hasChilren: ‘user’,multiple: false,checkStrictly: false ，nodes: false} | 参数配置，详细见下表。 |
| step-reload | Boolean | false | 是否懒加载数列 |
| page-size | Number | 50 | 每次加载的条数，stepReload = true时生效 |
props 参数说明
| 参数 | 类型 | 默认值 | 说明 |
| id | String | id | id列的属性名 |
| label | String | name | 指定选项标签为选项对象的某个属性值 |
| children | String | children | 指定选项的子选项为选项对象的某个属性值 |
| multiple | Boolean | true | 值为true时为多选，为false时是单选 |
| checkStrictly | Boolean | false | 需要在多选模式下才传该值，checkStrictly为false时，可让父子节点取消关联，选择任意一级选项。为true时关联子级，可以全选（暂时不可用） |
| nodes | Boolean | true | 在单选模式下，nodes为false时，可以选择任意一级选项，nodes为true时，只能选择叶子节点 |
事件
| 事件名 | 说明 | 返回值 |
| @clickItem | 点击Item列事件 | (item : Object ,realHasChildren : Boolean) |
| @change | 选项改变时触发事件 当前选中的值 | |
| @sendValue | 点击确认按钮时触发事件 | 参数（选中的项值） |
@clickItem,当点击item列时有效。返回值说明如下：
| 返回值 | 类型 | 说明 |
| item | Object | 当前选中的值 |
| realHasChildren | Boolean | 是否包含子级 |
@change,is-check为true时，当选中的值改变时触发。返回值说明如下：
| 参数 | 类型 | 说明 |
| e.detail.value | Boolean | 当前项是否选中 |
| item | Object | 当前的Item值 |
luyj-tree-search
说明
luyj-tree-search是luyj-tree内的组件,作为搜索框,可以单独引用。
基本用法
在
template中使用组件
1 |
复制代码<luyj-tree-search></luyj-tree-search> |
属性
| 属性名 | 类型 | 默认值 | 说明 |
| background-color | String | #FFFFFF | 背景色 |
| input-background-color | String | #EEEFF0 | 输入框背景色 |
| radius | Number | 40 | 输入框圆角，单位rpx |
| icon-color | String | #B8B8B8 | 图标颜色 |
| placeholder | String | 搜索 | 输入框为空时占位符 |
| placeholder-style | String | placeholder的样式 | |
| maxlength | Number | 140 | 最大输入长度 ,设置为 -1 的时候不限制最大长度 |
事件
| 事件名 | 说明 | 返回值 |
| @input | 输入框内容变化时，触发事件 | event |
| @focus | 输入框获得焦点时，触发事件 | event |
| @blur | 输入框失去焦点时，触发事件 | event |
| @confirm | 输入框内容提交时，触发事件 | event |
| @clear | 清空输入框内容时，触发事件 | ‘’ |
luyj-tree-navigation
luyj-tree-navigation是luyj-tree内的组件,作为面包屑导航栏，可以单独引用。luyj-tree-item
luyj-tree-item是luyj-tree内的组件，是树的选择项。包含单选、多选的样式，可以单独引用。基础用法
在
template中使用组件
复制代码<!-- 普通使用 --> <luyj-tree-item :item="item" :isCheck="ischecked" :multiple="multiple" :checked="ischecked" :comparison="comparison" @change="change" @clickItem="clickItem"> </luyj-tree-item> <!-- 使用插件 --> <luyj-tree-item :item="item" :isCheck="isCheck" :multiple="multiple" :checked="ischecked" :comparison="comparison" @change="change" @clickItem="clickItem"> <!-- 自定义插件内容 --> <template slot="body" > {{ item.label }} </template> <!-- 自定义插件内容 --> </luyj-tree-item>
对应的数据及方法如下：
复制代码import dataItem from '../../common/item-data.js'; export default { data() { return { item : dataItem, // 当前item值 isCheck : true, // 是否可选 ischecked : true, // 是否选中 multiple : false, // 是否多选 comparison :{ value : 'value', // 选中值 label : 'label', // 显示名称 children:'children', // 子级名称 }, test :124 } }, onLoad:function(){ }, methods: { // 修改change change : function(e , item){ console.log("修改当前值=>" ,e , item); }, // 点击当前项目 clickItem : function(item , hasChildren){ console.log("点击当前项目"); } } }
属性
| 属性名 | 类型 | 默认值 | 说明 |
| item | Object | {} | 当前项的值 |
| is-check | Boolean | false | 判断是否可选择，与multiple组合使用。判断显示类型为展示、单选、多选 |
| multiple | Boolean | false | 是否多选。当isCheck值为true时有效。multiple=false时为单选，multiple=true时多选 |
| checked | Boolean | false | 当前项是否选中状态 |
| nodes | Boolean | false | 是否只能选择叶子结点 |
| check-active-color | String | #00AAFF | 选中状态下，单选框/复选框的颜色 |
| check-none-color | String | #B8B8B8 | 未选中状态下，单选框/复选框的颜色 |
| comparison | Object | {value : ‘value’,label : ‘label’,children:‘children’}; | 当前项的列名称。 |
comparison的值
| 参数 | 类型 | 默认值 | 说明 |
| value | String | value | value值的列名，即选中时单选按钮或复选按钮的值 |
| label | String | label | label值的列名，即当前item默认展示的名称 |
| children | String | children | children对的列名，即当前item的下一级 |
事件
| 事件名 | 说明 | 返回值 |
| @change | 单选框/复选框值改变时执行方法 | (e , item) |
| @clickItem | 点击当前选项 | {item , hasChildren} |
change 的参数说明
| 参数 | 类型 | 说明 |
| e.detail.value | Boolean | 当前项是否选中 |
| item | Object | 当前的Item值 |
clickItem 的参数说明
| 参数 | 类型 | 说明 |
| item | Object | 当前的Item值 |
| hasChildren | Boolean | 是否包含子级，即children是否包含对象 |
源码地址
选了好几个，看着这个还不错，试着在项目中用了一下，确实可以，源码逻辑也很容易看懂
