解决 element-plus Cascader 级联选择器权限问题（非条件下禁用）

Louis919

已于 2024-07-25 13:47:52 修改

阅读量462

点赞数 5

文章标签： vue.js javascript 前端

于 2024-05-23 16:27:35 首次发布

本文链接：https://blog.csdn.net/Louis919/article/details/139151206

版权

业务需求：多账号登录的时候，每个账号只能选择属于自己所属条件下的标签，

 <div class="card-header-right">
      <el-cascader placeholder="筛选条件" clearable :style="[null, ''].includes(searchArr) ? 'width:200px' : 'width:' + (searchArr.join('/').length * 18 + 10) + 'px;max-width:450px;min-width:200px'"v-model="searchArr" size="default" :props="cityData"  @change="search(0)">
      </el-cascader>
 </div>

解决这个问题是处理好props

const cityData = {
            lazy: true,
            checkStrictly: true,
            async lazyLoad(node, resolve) {//element-plus框架自有
                const { level, value, pathValues ,checked} = node
                let res
                if (level == 0) {
                    res = await getCity()
                } else if (level == 1) {
                    res = await getYwdw({ city: value })
                } else if (level == 2) {
                    res = await getDydjByUnit({
                        city: pathValues[0],
                        ywdwmc: pathValues[1],
                    })
                } else if (level == 3) {
                    res = await getStation({
                        city: pathValues[0],
                        ywdwmc: pathValues[1],
                        dydj: pathValues[2],
                    })
                }
                console.log('res级联',node);
              //   let isChecked=true
              //  nextTick(()=>{
              //   if(node.pathLabels.includes(city.value)){
              //     isChecked=false 
              //       }
              //  })
                let nodes = res.data.map((item) => {
                  if(level == 0&&city.value){
                    if(item.value!==city.value){//
                      item.disabled=true
                    }
                  }
                  if(level==1){
                    if(!node.pathLabels.includes(city.value)){//
                      item.disabled=true
                    }
                  }
                  if (level == 2) {
                      item.label = kVObj[item.label]
                      if(!node.pathLabels.includes(city.value)){//重点：
                      item.disabled=true  
                    } 
                  }
                  if (level == 3) {
                        let obj = JSON.parse(JSON.stringify(item))
                        item.label = obj.value
                        item.value = obj.label + '&&&&' + obj.value
                        if(!node.pathLabels.includes(city.value)){//重点：筛选条件
                      item.disabled=true
                    }
                  }
                  
                  item.leaf = level >= 3
                  return item
                })
              
                
                resolve(nodes)
            },
        }