<el-cascader
ref="cascader"
style="width: 440px;"
:show-all-levels="false"
v-model="category_ids"
:options="cascaderData"
:props="{ expandTrigger: 'hover',multiple: true,checkStrictly: true,label:'tag_name',value:'id' }"
clearable></el-cascader>
//multiple多选,checkStrictly父子节点不互相关联
category_ids:[],
cascaderData:[],
getCascaderData() {
community.communityTagList(this.formData).then((r) => {
if (r.code === 1) {
r.data.list.forEach(v=>{
v.disabled = true //禁用第一级标签
})
const renamedData = r.data.list.map(obj => {
const newObj = {};
//把第一级的属性名name变成tag_name,父子级label统一
Object.keys(obj).forEach(key => {
if (key === "name") {
newObj["tag_name"] = obj[key];
} else {
newObj[key] = obj[key];
}
});
return newObj;
});
this.cascaderData = renamedData
this.removeEmptyChildren(this.cascaderData)
} else {
this.$common.notifyError(r.message);
}
});
},
removeEmptyChildren(arr){ //删除children数组为空的
for (let i = 0; i < arr.length; i++) {
const obj = arr[i];
if (obj.children && obj.children.length === 0) {
delete obj.children;
} else if (obj.children && obj.children.length > 0) {
this.removeEmptyChildren(obj.children);
}
}
},
watch:{
category_ids: { //监听级联最多选5个
handler(value) {
if (value.length > 5) {
this.searchParams.da = [value[0], value[1], value[2]]
}
// 处理禁用状态
this.$nextTick(() => {
var options = []
var disabled = value.length >= 5 // 大于等于3时禁用
this.cascaderData.forEach(option => {
if(option.children) {
option.children.forEach(child => {
// 如果是选中的则不需禁用
if (value.find(array => array[1] === child.id)) {
child.disabled = false
} else {
child.disabled = disabled
}
})
}
options.push(option)
})
// 重新进行赋值
this.cascaderData = options
})
},
deep: true
}
},
onSubmit(){ //提交this.category_ids是二维数组,需要处理
let result = JSON.parse(JSON.stringify(this.category_ids))
if (result.length == 0) {
result = result.join('')
} else {
result = result.map(v => v[1]).join(',');
}
}
el-cascader使用,多选禁用
于 2023-11-27 16:25:29 首次发布
文章讲述了在Vue应用中使用el-cascader组件实现多级选择,如何处理父子节点关联、级联选择数量限制,以及数据提交的处理方法。
2198

被折叠的 条评论
为什么被折叠?



