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

回显的方式

首先把这个属性设置成false,这样回显的时候v-model传递一个当前节点ID的数组就好了，就这么简简单单。

ps:以下是瞎写的，当时没发现有emitPath这个属性，保存的都是数组。后来才发现自己是个傻子

两种情况：
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>

2. 保存最后一位，递归回显 ，针对于菜单结构多变，每个人看到的菜单层级不一样，可以在数据库中只保存选择的那一项的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);
    }
  }
},