更新记录

1.0.1(2020-08-07)

优化样式

1.0(2020-08-01)

  1. 实现无限极树形组件多选操作,默认选中,选中取值功能
  2. 模糊搜索
  3. 配置选项props,显示的字段,和子级的字段
  4. 面包屑类型导航
查看更多

废话不多说,直接上效

在这里插入图片描述

使用说明:

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 指定选项的子选项为选项对象的某个属性值

方法

方法名 参数 说明
sendValue val val 接收选中的数据

注意:

trees数据需要带有checked字段 默认选中需要传checkList 并调用checks方法

            checks(){
                var that=this;
                for (var i = 0, len = that.tree.length; i < len; i++) {
                    for (var j = 0, lens = that.checkList.length; j < lens; j++) {
                        if (that.checkList[j].id === that.tree[i].id) {
                            that.$set(that.tree[i], 'checked', true)
                            break
                        } else {
                            that.$set(that.tree[i], 'checked', false)
                        }
                    }
                }
            },

获取选中的值(重要)

        <tree :checkList="checkList"  :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();
        }

完整使用示例代码

<template>
    <view>
        <tree :checkList="checkList" :props="prop" @sendValue="confirm" :isCheck="true" :trees="tree" />
        <view class="btn box_sizing">
            <button class="sureBtn" type="primary" @click="backConfirm">确认</button>
        </view>
    </view>
</template>


    import tree from '@/components/tree/tree.vue';
    export default {
        components: {
            tree
        },
        data() {
            return {
                tree: [{
                        checked: false,
                        children: [{
                                children: [{
                                    children: [{
                                        children: [{
                                            children: [{
                                                    children: "",
                                                    id: "10",
                                                    name: "学生b挥",
                                                    pid: "",
                                                    checked: false,
                                                    user: true
                                                },

                                                {
                                                    children: "",
                                                    id: "1281778375907655681",
                                                    name: "学生",
                                                    checked: false,
                                                    pid: "",
                                                    user: true
                                                },
                                                {
                                                    children: "",
                                                    id: 9965,
                                                    name: "小陆",
                                                    checked: false,
                                                    pid: "",
                                                    user: true
                                                },
                                                {
                                                    children: [{
                                                        children: "",
                                                        id: 26,
                                                        checked: false,
                                                        name: "学生a",
                                                        pid: "",
                                                        user: true
                                                    }, ],
                                                    id: 15,
                                                    checked: false,
                                                    name: "助班",
                                                    pid: "14",
                                                    user: false
                                                }
                                            ],
                                            id: 7,
                                            checked: false,
                                            name: "班长",
                                            pid: "4",
                                            user: false
                                        }],
                                        id: 4,
                                        checked: false,
                                        name: "教职工",
                                        pid: "3",
                                        user: false
                                    }],
                                    id: 3,
                                    name: "教师团队",
                                    checked: false,
                                    pid: "2",
                                    user: false
                                }],
                                id: 2,
                                name: "系主任",
                                checked: false,
                                pid: "1",
                                user: false
                            },
                            {
                                children: [{
                                    children: [{
                                        children: [],
                                        id: 1566,
                                        checked: false,
                                        name: "n学生",
                                        pid: "14",
                                        user: true
                                    }],
                                    id: 1455,
                                    checked: false,
                                    name: "ban",
                                    pid: "13",
                                    user: false
                                }],
                                id: 1355,
                                checked: false,
                                level: 2,
                                name: "系副主任",
                                pid: "1",
                                user: false
                            }
                        ],
                        id: 1,
                        memberCount: 66,
                        name: "副校长",
                        checked: false,
                        pid: "-1",
                        user: false
                    },
                    {
                        id: 6666998,
                        name: "校长",
                        pid: "-1",
                        checked: false,
                        user: false,
                        children: [{
                            id: 888,
                            name: "小陆",
                            checked: false,
                            pid: "-1",
                            user: true
                        }]
                    }
                ],
                checkList: [],
                prop: {
                    label: 'name',
                    children: 'children'
                }
            }
        },
        onLoad(o) {
            var that = this
            that.checkList = JSON.parse(o.item)
            that.checks()
        },
        methods: {
            //检查默认选中,要是字段钟本身包含了checked字段就不需要这个
            checks() {
                var that = this;
                for (var i = 0, len = that.tree.length; i < len; i++) {
                    for (var j = 0, lens = that.checkList.length; j < lens; j++) {
                        if (that.checkList[j].id === that.tree[i].id) {
                            that.$set(that.tree[i], 'checked', true)
                            break
                        } else {
                            that.$set(that.tree[i], 'checked', false)
                        }
                    }
                }
            },
            //获取选中的
            confirm(val) {
                this.checkList = val
            },
            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();
            }
        }
    }


<style>
    .box_sizing {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .btn {
        position: fixed;
        bottom: 0;
        padding: 10px;
        background-color: #fff;
        width: 100%;

        .sureBtn {
            background-color: #f57a00;
            color: #fff;
        }
    }
</style>

结语

新手第一次插件,写法比较low,望各位大佬多包涵。有不足之处欢迎指出。

在这里插入图片描述

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问