更新记录

1.0.0（2023-05-22）

数据层级树、逐级选择、多选、复选、反选、全选、面包屑导航

平台兼容性

博客地址：(https://www.jianshu.com/p/dad06a0b3e10) 掘金地址：(https://juejin.cn/post/7234419104597770277)

功能和特性：

一、最上层级页增加“全部”字段，支持全选和全不选设备 二、若子层级的设备全部选中，则上级组织展示选中状态，如图1 三、若子层级的设备有部分选中，则上级组织展示为半选中状态，如图3，4 四、若子层级的设备全部未选中，则上级组织展示为非选中状态，如图2 五、可直观定位和追溯所选择设备的信息，各层级展示已选数量/全部数量（例：已选2/10），用于展示在各层级已选的设备情况，展示格式：已选X/Y，其中X表示当前层级内已选择的设备数量，Y表示当前层级内全部设备数量

用法

建议先下载示例项目，运行起来就明白了 1、第一步导入组件： 导入到hbuilderx或者把示例代码中的lius-checkboxtree文件夹拖进项目 2、第二步注册路由： 在pages.json文件中添加该组件的路径，具体如下：

    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "uni_modules/lius-checkboxtree/components/lius-checkboxtree/lius-checkboxtree",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        }
    ],

3.第三步跳转逐级多选组件页面： 在需要需要用到组件的页面，写一个跳转组件的方法，方法里对携带的选中数据进行处理：

jumptree() {
        let powerselectedData = []
        if (this.checkList.length > 0) {
            for (let i = 0; i < this.checkList.length; i++) {
                let item = this.checkList[i];
                let info = {}
                info.pid = item.pid;
                info.selecteTag = 2;
                info.deviceCode = item.deviceCode;
                info.deviceName = item.deviceName;
                powerselectedData.push(info)
            }
        }
        const map = new Map();
        const that = this;
        powerselectedData = powerselectedData.filter(key => !map.has(key.deviceCode) && map.set(key.deviceCode,
            1));
        let par = JSON.stringify(powerselectedData);
        uni.navigateTo({
            url: '/uni_modules/lius-checkboxtree/components/lius-checkboxtree/lius-checkboxtree?powerselectedData=' +
                encodeURIComponent(par),
            events: {
                PowerTree: function(data) {
                    console.error('返回的数据', data);
                    that.hanldChooseData(data.data);
                }
            }
        })
    },

4.在跳转组件的页面，对组件选中的数据进行处理和回显：

        hanldChooseData(data) {
                let value = "";
                if (data) {
                    let valueLenth = data.length;
                    if (valueLenth > 0) {
                        let namelist = [];
                        for (let i in data) {
                            namelist.push(data[i].deviceName);
                        }
                        let namestr = namelist.join('， ');
                        value = '选中' + valueLenth + '个;分别是' + namestr;
                    }
                }
                this.prepareVideoList(data, value);
            },
            prepareVideoList(data, value) {
                const that = this;
                setTimeout(function() {
                    that.title = value;
                }, 10);
                this.checkList = [];
                for (let i = 0; i < data.length; i++) {
                    let item = data[i];
                    this.checkList.push(item);
                }
            }

实现思路

每一个单元格item都有3种状态标识，selecteTag分为0，1，2。0是未选中，1是半选中，2是选中状态。点击复选框选中和非选中的方法里，同时向上和向下递归处理，向上拿着该item的上级组织的id递归遍历所有上级组织，同时根据012的逻辑给上级组织selecteTag赋值；向下如果该item的存在子级，就把所有子级递归赋值selecteTag为0或者2。同时只对设备进行处理，在选中的数组newCheckList中进行添加或删除操作。

核心代码

/** 选中当前的值
             * @param {Object} e
             * @param {Object} item 当前项
             * @param {Object} index 索引
             */
            checkboxChange(e, item, index) {
                uni.showLoading({
                    title: '正在加载,请稍候'
                });
                console.log('点击chechckBox', e.detail.value, item);
                let that = this;
                var data = that.newCheckList;
                let findIdex = -1; //that.newCheckList.indexOf(item)
                for (let i in data) {
                    if (data[i].deviceCode == item.deviceCode) {
                        findIdex = i;
                        break;
                    }

                }
                console.log('选中的数组中的第几个', findIdex);
                if (e.detail.value && e.detail.value > 0) {
                    // 点击选中
                    if (!item.children && !item.deviceCode) {
                        console.log('选中第一级', item);
                        // 遍历找到item的上级，赋值选中
                        this.partRadioEach(this.parent_data, item.id, 1);
                        //第一级的选中
                        this.parentSelected(item.id, 1);

                    } else {
                        that.tree[index].selecteTag = 2
                        if (item.deviceCode && findIdex < 0) {
                            that.newCheckList.push(that.tree[index]);
                        }
                        console.log('选中de', that.newCheckList);
                        var childrendata = that.tree[index].children;

                        if (childrendata && childrendata.length > 0) {
                            that.selectedDown(childrendata);
                        }
                    }

                } else {
                    // 点击不选
                    if (!item.children && !item.deviceCode) {
                        console.log('取消选中第一级', item);
                        // 遍历找到item的上级，赋值不选中
                        this.partRadioEach(this.parent_data, item.id, 0);
                        //第一级的不选中
                        this.parentSelected(item.id, 0);

                    } else {
                        if (item.deviceCode) {
                            that.newCheckList.splice(findIdex, 1);
                        }
                        that.tree[index].selecteTag = 0
                        var cancledata = that.tree[index].children;
                        console.log('取消删除', cancledata);
                        if (Array.isArray(cancledata) && cancledata.length > 0) {
                            that.deleteDown(cancledata);
                        }
                    }
                }

                that.parentforEach(that.parent_data, item.pid);

                console.log('最后的选中数组', this.newCheckList, item.pid);
                that.checckNewList();
                this.topSelString = this.getTopChooseItem();
                that.$forceUpdate(); //强制更新数据
                uni.hideLoading();
            },