当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 17:55:05 vue.js

直接上渲染功能介绍1.支持单选和多选(选择返回的格式为数组),多选-级组织更新日志2.0.0(2020-11-18)1.修复无法使用多选的问题。2.修复面包屑不会自动放在右边的问题。3.修复数据初始失败的问题1.2.2(2020-10-24)1.增加单选模式选择叶子节点的属性,nodes,为true时,只能选择叶子节点,当它是假的,你可以选择任何项目。使用说明:1.导入组件importtreefrom'@/components/xiaolu-tree/tree.vue';在页面注册组件引用组件参数说明参数类型是否必填默认值说明treesArray是[]传入的数据,看下面的例子bell选择操作,多选propsObject否{label:'name',children:'children'}参数配置,详见下表props参数说明参数类型是否必填DefaultValuedescriptionlabelstringNoname指定optionlabel是选项对象的一个??属性值childrenstringnochildren指定选项的子选项是选项对象的某个属性值multipleBoolean没有true是多选,false是单选checkStrictlyBoolean没有false单选模式下,只能选择叶子节点;在多选模式下,启用该功能后(当checkStrictly为false时),可以让父子节点解除关联,选择任意一级选项。注意:单选和多选都是使用数组值方法方法名参数说明sendValuevalval接收选中的数据注意:trees数据需要有checked字段。默认需要通过checkList,调用checks方法获取选中的值(重要)0":props="prop"@sendValue="confirm":isCheck="true":trees="tree"/>//获取选中的confirm(val){this.checkList=val},点击Confirm返回第一页时,会发送选中的值out(包括小程序和h5的传值方式)。获取到的数据返回一个数组,包含了选中对象的所有字段,如果只需要某个字段,遍历一遍backConfirm(){varpages=getCurrentPages();varcurrPage=pages[pages.length-1];//当前页面varprevPage=pages[pages.length-2];//prevpage//h5写法prevPage.query=this.checkList//小程序写法//prevPage.$vm.query=this.checkListuni.navigateBack();}获取组件地址插件市场:点击跳转到GitHub:点击跳转总结:这是新手的第一个插件,写法比较low。我希望你能原谅我。有不足欢迎指出。代码有问题可以加我qq:122720267