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部分
隐藏父项的多选框以达到禁用全选子项的功能