vue3.2 Cascader 级联选择的展示组件用的是ant design

最新推荐文章于 2024-08-06 15:03:02 发布

六加六呀

最新推荐文章于 2024-08-06 15:03:02 发布

阅读量644

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_44761131/article/details/128588906

版权

文章描述了一个在Vue应用中处理级联选择器的问题，当选择器的值是一个数组，包含多级部门ID时，如何根据后端传递的单个部门ID反推出其上级和上上级。作者通过创建Map对象，以键值对形式存储每个部门ID及其所有上级ID，从而实现从单一ID获取完整路径的功能。

摘要由CSDN通过智能技术生成

这个级联选择器绑定的value是一个数组，但是传给后端是数组的最后一个值，后端传给前端也最后一个数，这时候就需要根据后端给的数反推出他的上级,上上级思路就是把后端传过来的值放在一个对象里当一个键名，根据键值对的形式拿到你想要的东西

<a-cascader @change="ccc"  v-model:value = deptValId :options="options" change-on-select  />

//绑定的value
const deptValId:any = ref([]);
//下拉数据需要调接口
const options:any = ref();
//创建一个对象  d d2 d3 是因为我这边最多选择3级就创建了3个属性，如果你是多个的话就需要写一个方法调用
let deptMap = new Map();
let d;
let d2;
let d3;
const getDept = () => {
  getDeptList().then((res:any)=>{
      res.forEach((item:any)=>{
         //这个就是第一级的值
         d = [item.deptId];
        // 我把item.deptId当做键 d是键所对应的值然后存起来
        deptMap.set(item.deptId,d)
        item.label = item.deptName
        item.value = item.deptId
        item.children.forEach((item2:any,i:number,arr)=>{ 
           //第二级就是把上一级和这一级的两个数组连接起来
          d2 = d.concat([item2.deptId])
         //以键值对的形式存起来
          deptMap.set(item2.deptId,d2)
          item2.label = item2.deptName
          item2.value = item2.deptId
          item2.children.forEach((item3:any,i:number,arr)=>{
            //第三级也同上
            d3 =  d2.concat([item3.deptId])
           //以键值对的形式存起来
            deptMap.set(item3.deptId,d3)
            item3.label = item3.deptName
            item3.value = item3.deptId
          })
        })
      })
    if(route.query.deptId){
       //在对象里拿到你所需要的数据
      deptValId.value = deptMap.get(Number(route.query.deptId))
    }
    options.value = res
  })
}
const ccc = (e) => {
  console.log(e)
}