vue element-ui 级联选择器 父项多选-子项单选

element-ui 级联选择器 父项多选-子项单选

组件部分

js部分

handleChange() {
            // selected List转map
            const selectedMap = this.selected.reduce((acc, obj) => {
                acc[obj[0]] = obj[1];
                return acc;
            }, {});
            // historySelected List转map
            const historySelectedMap = this.historySelected.reduce((acc, obj) => {
                acc[obj[0]] = obj[1];
                return acc;
            }, {});
            // 当前选中的选项
            let currSel;
            // 是否是取消
            let isCancle;
            if (this.selected.length >= this.historySelected.length) {
                //新增
                isCancle = false;
                const bros = this.findElementsWithSameParent(this.selected);
                //同级选中一个组件多个版本
                if (bros.length > 0) {
                    // historySelected中是旧的子项
                    // 取消非当前选中的版本
                    const keys = Object.keys(historySelectedMap);
                    const hisSelect = keys.filter(key => bros.some(obj => key == obj[0] && historySelectedMap[key] == obj[1])).map(key => [parseInt(key), historySelectedMap[key]])[0];
                    currSel = bros.filter(obj1 => obj1[1] != hisSelect[1])[0];
                    this.dealRelatedOption(historySelectedMap, hisSelect, true).then((res) => {
                        const afterCancelSelectedMap = res.reduce((acc, obj) => {
                            acc[obj[0]] = obj[1];
                            return acc;
                        }, {});
                        this.dealRelatedOption(afterCancelSelectedMap, currSel, isCancle);
                    });
                } else {
                    // currSel = this.selected[this.selected.length - 1];
                    if (this.selected.length == 1) {
                        currSel = this.selected[0];
                    } else {
                        const keys = Object.keys(selectedMap);
                        // Using Array.filter() to get an array of objects from array1 that have ids not present in array2
                        currSel = keys.filter(key => !historySelectedMap[key]).map(key => [parseInt(key), selectedMap[key]])[0];
                    }
                    const fromOld = this.origin.filter(a => a[0] == currSel[0] && a[1] == currSel[1]).length > 0;
                    if (!fromOld) {
                        this.dealRelatedOption(historySelectedMap, currSel, isCancle);
                    } else {
                        this.historySelected = this.selected;
                    }
                }
            } else {
                //修改时，页面关联组件版本的取消操作，
                isCancle = true;
                // Using Object.keys() to get an array of all the keys in historySelectedMap
                const keys = Object.keys(historySelectedMap);
                // Using Array.filter() to get an array of objects from array1 that have ids not present in array2
                currSel = keys.filter(key => !selectedMap[key]).map(key => [parseInt(key), historySelectedMap[key]])[0];
                const fromOld = this.origin.filter(a => a[0] == currSel[0] && a[1] == currSel[1]).length > 0;
                if (!fromOld) {
                    this.dealRelatedOption(historySelectedMap, currSel, isCancle);
                } else {
                    this.historySelected = this.selected;
                }

            }
        }
dealRelatedOption(map, currSel, isCancle) {
            const copiedSelected = JSON.parse(JSON.stringify(this.selected));
            return new Promise((resolve, reject) => {
                this.$http({
                    url: this.$http.adornUrl("/onlineUpdate/componentVersion/queryRelatedVersion"),
                    method: "post",
                    data: this.$http.adornParams({
                        selected: map,
                        cVersionId: currSel[1]
                    }),
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        //取消无关联的元素
                        if (data.related.length == 0) {
                            if (isCancle) {
                                // 代码执行取消，去掉取消选项
                                copiedSelected.forEach((item, i) => {
                                    if (currSel[0] == item[0] && currSel[1] == item[1]) {
                                        copiedSelected.splice(i, 1);
                                    }
                                });
                            }
                        }
                        data.related.forEach(element => {
                            if (isCancle) {
                                // 取消关联的选项
                                copiedSelected.forEach((item, i) => {
                                    if (element[0] == item[0] && element[1] == item[1]) {
                                        copiedSelected.splice(i, 1);
                                    }
                                });

                            } else {
                                if (element[0] !== currSel[0]) {
                                    copiedSelected.push(element);
                                }
                            }
                        });
                        this.$set(this, 'selected', copiedSelected)
                        this.historySelected = copiedSelected;
                        resolve(copiedSelected)
                    } else {
                        this.$set(this, 'selected', this.historySelected);
                        if (!data.code) {
                            this.$message.error(this.$t('message.unkownError'));
                        } else {
                            this.$message.error(this.$t('message.' + data.code));
                        }
                    }
                });
            })

        }

css部分
隐藏父项的多选框以达到禁用全选子项的功能