Element-ui Cascader 级联选择器回显数据

快来打我* 2022-10-27 13:42 16阅读 0赞

# 回显的方式 #

> 两种情况：  
> 1.直接使用JSON回显（针对于每个人看到的菜单一致，数据库直接保存数据JSON串，直接回显）  
> 2.保存最后一位，递归回显 （针对于每个人看到的菜单不一样，有的人能看到两级，有的人能看到三级，只保存最后一位，然后前端做一下处理）

> 以下代码中的变量含义：
> 
>  *  resultJson：要回显的JSON串
>  *  navList：级联JSON数据（菜单父子结构数据）
>  *  navIds：数据库保存的 2，3，4（需要回显的最后一位ID数组）

1.  **直接使用JSON回显** ，数据库保存数组JSON串，回显的时候直接使用该JSON串赋值；  
    例如数据库保存 \[\[1,2\],\[1,3\],\[1,4\]\]

// 例如回显的JSON串：resultJson = [[1,2],[1,3],[1,4]]，直接model绑定即可
    <el-cascader
      v-model="resultJson"
      :options="navList"
      :props="{ multiple: true, checkStrictly: true }"
      :show-all-levels="false"
      clearable
    ></el-cascader>

1.  **保存最后一位，递归回显** ，针对于菜单结构多变，每个人看到的菜单层级不一样，可以在数据库中只保存选择的那一项的ID，不保存数组结构的JSON串；  
    例如数据库只保存 2，3，4 ，在回显之前做一些处理，处理成\[\[1,2\],\[1,3\],\[1,4\]\]的格式。

<el-cascader
      v-model="resultJson"
      :options="navList"
      :props="{ multiple: true, checkStrictly: true }"
      :show-all-levels="false"
      clearable
    ></el-cascader>
    
    ......省略其他无用代码
    
    
    //回显之前的处理
    getnavList() { 
    	  //查询navList，（获取要级联展示的数据）
          getnavList().then((res) => { 
              this.navList= res.data;
              //定义一个数组，执行递归方法，执行完就是[[1,2],[1,3],[1,4]]的格式了
              this.resultList = [];
              this.editList(res.data,this.resultList);
              //赋值给 this.resultJson，完成回显
              this.resultJson= this.resultList;
          });
    },
    //递归处理数据，获取要回显的数组
    editList(deptList,ids){ 
      for(var i=0;i<deptList.length;i++){ 
        let childids = JSON.parse(JSON.stringify(ids));
        childids.push(deptList[i].value);
        //判断有没有children这个属性，有的话继续执行循环
        if('children' in deptList[i]){ 
            this.editList(deptList[i].children,childids);
        }
        //this.navIds(数据库保存的 2，3，4),判断2.3.4里面是否包括当前循环的菜单ID，
        //如果包含，就添加到要回显的数组当中
        if(this.navIds.indexOf(deptList[i].value) != -1){ 
            this.resultList.push(childids);
        }
      }
    },