<template>
|
<el-cascader
|
ref="cascaderEle"
|
:options="optionList"
|
:props="config"
|
collapse-tags
|
:filterable="filterable"
|
:size="size"
|
:style="{width: width + 'px'}"
|
v-model="choiceEle"
|
@change="selectChange"
|
clearable>
|
</el-cascader>
|
</template>
|
|
<script>
|
/**
|
* options [{ value: "", label: "", childList: []}]
|
* checkStrictly 设置父子节点取消选中关联
|
* 获取选中结果 change事件
|
* all 是全部
|
* size 大小
|
* filterable 是否支持筛选
|
*/
|
export default {
|
name: 'AiCascaderAll',
|
props: {
|
optionsData: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
},
|
options: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
},
|
width: {
|
type: Number,
|
default: 180
|
},
|
checkStrictly: {
|
type: Boolean,
|
default: false
|
},
|
filterable: {
|
type: Boolean,
|
default: true
|
},
|
size: {
|
type: String,
|
default: "mini"
|
}
|
},
|
data() {
|
return {
|
optionList: [],
|
lastSelectedList: [],
|
choiceEle: [],
|
allLength: 0,
|
allOptions: [{ value: "all", label: "全部", childList: null }],
|
config: {
|
multiple: true,
|
checkStrictly: false
|
}
|
}
|
},
|
watch: {
|
options() {
|
this.setData();
|
},
|
optionsData() {
|
this.setData();
|
}
|
},
|
mounted() {
|
this.setData();
|
this.config.checkStrictly = this.checkStrictly;
|
},
|
methods: {
|
setData() {
|
this.optionList = [];
|
if (this.optionsData.length > 0) {
|
this.choiceEle = this.optionsData
|
}
|
|
this.optionList = this.allOptions.concat(this.options);
|
// this.loopSelectData(this.options);
|
console.log(this.options)
|
|
console.log(this.optionsData)
|
// 记录下全部选中时的个数
|
this.allLength = this.choiceEle.length;
|
this.lastSelectedList = [...this.choiceEle];
|
this.sendInfo();
|
},
|
selectChange(val) {
|
let lastHasAll = this.lastSelectedList.find(arr => {
|
return arr[0] === 'all';
|
});
|
let nowHasAll = val.find(arr => {
|
return arr[0] === 'all';
|
});
|
if (lastHasAll && !nowHasAll) {
|
// 点击取消了 全选
|
// this.clearCascader();
|
this.choiceEle = [];
|
this.lastSelectedList = [];
|
this.$nextTick(() => {
|
this.sendInfo();
|
});
|
return;
|
}
|
if (!lastHasAll && nowHasAll) {
|
this.choiceEle = [];
|
// 点击了 全选
|
this.loopSelectData(this.optionList);
|
this.lastSelectedList = [...this.choiceEle];
|
this.$nextTick(() => {
|
this.sendInfo();
|
});
|
return;
|
}
|
// 当点选了除全部按钮外的所有 选中全部按钮
|
if (!nowHasAll && val.length === this.allLength - 1) {
|
this.choiceEle = [['all']].concat(this.choiceEle);
|
val = [['all']].concat(val);
|
}
|
// 当全部选项都选中 这时取消了除全部按钮外的一个 去掉选中全部按钮
|
if (nowHasAll && val.length < this.allLength) {
|
val = val.filter(arr => {
|
return arr[0] !== 'all';
|
});
|
this.choiceEle = [...val];
|
}
|
this.sendInfo();
|
this.lastSelectedList = [...val];
|
},
|
loopSelectData(list, parentNode = []) {
|
list.length > 0 &&
|
list.forEach((e) => {
|
let pNode = [...parentNode]; // 注意这里必须是深拷贝，否则会由于引用类型赋值的是地址（指针），导致parentNode在pNode更新时，同时被更新
|
if (e.children && e.children.length > 0) {
|
pNode.push(e.value);
|
// 当没有关联时 需要每一级都存下
|
if (this.checkStrictly) {
|
this.choiceEle.push([...pNode]);
|
}
|
this.loopSelectData(e.children, pNode);
|
} else {
|
if (parentNode.length > 0) {
|
this.choiceEle.push([...parentNode, e.value]);
|
} else {
|
this.choiceEle.push([e.value]);
|
}
|
}
|
});
|
},
|
sendInfo() {
|
this.$emit('change', this.choiceEle);
|
}
|
}
|
};
|
</script>
|
|
<style scoped></style>
|
