element el-cascader 下拉选择树

element el-cascader 选中的任意一级，选中上级，下级选项禁止选择

代码

   <el-cascader
                :options="userGroupFW"
                v-model="form.group"
                filterable
                ref="editCascader"
                :props="{ multiple: true, emitPath:true, checkStrictly: true }"
                @change="handleChange"
                style="width:760px;"
                clearable></el-cascader>

实现方法

群组下拉树结构

const getUserGroupFW = () => {
  listGroupRange().then(response => {
    userGroupFW.value = response.data;
  });
}

级联选择器子项禁用或者解禁用

const setDisabledFunc = (arr,flag)=>{
  if(!arr || arr.length==0){
    return
  }
  arr.forEach(item=>{
    item.disabled = flag;
    setDisabledFunc(item.children, flag)
  })
}

清空选中的级联选择面板

const clearData = ()=>{
  userGroupFW.value.forEach(item=>{
    item.disabled = false;
    setDisabledFunc(item.children, false)
  })
}

级联选择器change，给后端需要的参数赋值不同的id

const handleChange= (val)=>{
  clearData()
  let arrold = editCascader.value.getCheckedNodes()
  arrold.forEach(e => { 
    if(e.checked == true){
      setDisabledFunc(e.childrenData, true)
    }
    })
  form.value.userGroupIds = []
  form.value.deptIds= []
  form.value.userIds= []
  form.value.childGroupIds= []
  form.value.groupString = JSON.stringify(form.value.group)
  arrold.map(function(item,index){
    if(item.data.level == 1){
      let data = item.data.value
      form.value.userGroupIds.push(data)
      // console.log(form.value.userGroupIds,"userGroupIds")
    }
    if(item.data.level == 2){
      let data = item.data.value
      form.value.deptIds.push(data)
    }
    // console.log(form.value.deptIds,"deptIdsPPP")
    if(item.data.level == 3){
      let data = item.data.value
      form.value.userIds.push(data)
      // console.log(form.value.userIds,"userIds")
    }
    if(item.data.level == 4){
      let data = item.data.value
      form.value.childGroupIds.push(data)
      // console.log(form.value.childGroupIds,"childGroupIds")
    }
  })
}

运行效果

1669279520997.png