关于vue.js:uniapp无限级树形结构组件多选组件支持搜索无限级面包屑类型导航

55次阅读

共计 1313 个字符,预计需要花费 4 分钟才能阅读完成。

间接上效果图

性能介绍

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';

  1. 注册组件
  2. 在页面援用组件

参数阐明

参数 类型 是否必填 默认值 阐明
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,望各位大佬多包涵。有不足之处欢送指出。

有问题能够加我 qq:122720267

正文完
 0