直接上效果图
功能介绍
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';注册组件
在页面引用组件
参数说明参数类型是否必填默认值说明treesArray是[ ]传入的数据,见下面的例子
childrenstring否children指定选项的子选项为选项对象的某个属性值
searchIfBoolean否true是否开启搜索框
isCheckBoolean否true是否开启选钟操作,多选
propsObject否{label:'name',children:'children'}参数配置,详细见下表
props参数说明参数类型是否必填默认值说明labelstring否name指定选项标签为选项对象的某个属性值
childrenstring否children指定选项的子选项为选项对象的某个属性值
multipleBoolean否true值为true时为多选,为false时是单选
checkStrictlyBoolean否false在单选模式下,你只能选择叶子节点;而在多选模式下,启用该功能后(checkStrictly为false时),可让父子节点取消关联,选择任意一级选项。
注意:单选和多选都是以数组传值
方法方法名参数说明sendValuevalval 接收选中的数据
注意:
trees数据需要带有checked字段
默认选中需要传checkList
并调用checks方法
获取选中的值(重要)//获取选中的
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,望各位大佬多包涵。有不足之处欢迎指出。
码
有问题可以加我qq:122720267