el-cascader使用,多选禁用

文章讲述了在Vue应用中使用el-cascader组件实现多级选择,如何处理父子节点关联、级联选择数量限制,以及数据提交的处理方法。
<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(',');
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值