el-cascader第一级单选,第二级多选且最多3个

效果图

第一级为单选,第二级多选,但是仅3个
第一级单选,第二级多选,但是仅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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值