效果图
第一级为单选,第二级多选,但是仅3个
template部分
<template>
<el-cascader
v-model="value"
placeholder="请选择学生"
size="mini"
clearable
:options="options"
:show-all-levels="false"
:props="{ multiple: true}"
style="width: 200px;margin: 20px;"
@change="change"
>
</el-cascader>
</template>
script部分
export default {
name: 'Test',
data() {
return {
value: [],
options: [
{ label: '一班', value: '1', children: [{ label: '张三', value: '1' }, { label: '李四', value: '2' }, { label: '王五', value: '3' }, { label: '赵六', value: '4' }] },
{ label: '二班', value: '2', children: [{ label: '王也', value: '5' }, { label: '诸葛青', value: '6' }, { label: '陆谨', value: '7' }, { label: '张楚岚', value: '8' }, { label: '冯宝宝', value: '9' }] },
{ label: '三班', value: '3', children: [{ label: '工藤新一', value: '10' }, { label: '樱木花道', value: '11' }] }
]
}
},
methods: {
// 处理禁用状态
change(value) {
// 如果大于3时进行处理
if (value.length > 3) {
this.searchParams.da = [value[0], value[1], value[2]]
}
// 处理禁用状态
this.$nextTick(() => {
var options = []
var disabled = value.length >= 3 // 大于等于3时禁用
this.options.forEach(option => {
option.children.forEach(child => {
// 如果是选中的则不需禁用
if (value.find(array => array[1] === child.value)) {
child.disabled = false
} else {
child.disabled = disabled
}
})
options.push(option)
})
// 重新进行赋值
this.options = options
})
}
}
}
CSS部分
/* 隐藏第一列的复选框 */
.el-cascader-panel .el-scrollbar:first-child .el-checkbox{
display: none !important;
}