一、页面显示效果
二、主要代码
<el-form-item label="客户类型:">
<el-cascader
v-model="searchForm.customerTags"
:options="options"
:props="{ multiple: true }"
clearable
size='small'
collapse-tags
@change="changeLabel"
popper-class="disableFirstLevel"
>
<!-- :props="{ multiple: true, checkStrictly: true }" -->
</el-cascader>
</el-form-item>
data(){
return{
shareScopeEnd: [],
ptions: [],
}
},
changeLabel(val) {
// 是否与上次的类型相同
let changeFlag = false
let nowItem =[]
let firstItem =[]
if (this.shareScopeEnd.length == 0) {
this.searchForm.customerTags = val
} else {
// 与原数组比对
this.searchForm.customerTags.forEach((item) => {
if (item[0] !== this.shareScopeEnd[0][0]) { // 一级标签不同
changeFlag = true
firstItem.push(item)
} else if (item[1] != this.shareScopeEnd[0][1]) { // 一级标签相同但是二级标签不同
changeFlag = false
nowItem.push(item)
}
})
}
if (changeFlag && firstItem.length) {
this.searchForm.customerTags=firstItem
}else if(!changeFlag && nowItem.length){
this.searchForm.customerTags=nowItem
}
this.shareScopeEnd = this.searchForm.customerTags
},
<style lang="scss">
.disableFirstLevel{
.el-cascader-panel {
.el-scrollbar:first-child {
.el-checkbox {
display: none;
}
}
// .el-scrollbar:nth-child(2) {
// .el-checkbox {
// display: none;
// }
// }
}
}
二、选中未回显
如果没有下级,让children为null就会回显了
链接: https://blog.csdn.net/qq_37916164/article/details/121790774?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2aggregatepagefirst_rank_ecpm_v1~rank_v31_ecpm-2-121790774.pc_agg_new_rank&utm_term=element+plus%E7%BA%A7%E8%81%94%E9%80%89%E6%8B%A9%E5%99%A8%E4%B8%80%E7%BA%A7%E5%8D%95%E9%80%89%E4%BA%8C%E7%BA%A7%E5%A4%9A%E9%80%89&spm=1000.2123.3001.4430.
链接: https://www.jianshu.com/p/f6e256702040.
链接: https://blog.csdn.net/qq_37582012/article/details/126429955?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-126429955-blog-125549981.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-126429955-blog-125549981.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=1