el-cascader 级联选择器 ：回显回显回显

0. 缘起

用到了级联选择器，结果选中成数组好理解，回显却成了大问题。问了下小伙伴，小伙伴表示是递归查找路径，我也整了一波。

1. 使用

        <el-cascader
          v-if="userType.includes('平台')"
          v-model="selectOrg"
          :options="options.organizations"
          ref="platformCas"
          :show-all-levels="false"
          @change="handleChange"
          :props="{
            multiple: 'true',
            value: 'id',
            label: 'orgName',
            checkStrictly: true,
          }"
        ></el-cascader>
        <el-cascader
          v-if="userType.includes('政府')"
          v-model="selectOrg"
          ref="platformCas"
          :options="options.organizations"
          @change="handleChange"
          :show-all-levels="false"
          :props="{
            value: 'id',
            label: 'orgName',
            checkStrictly: true,
          }"
        ></el-cascader>

    handleChange() {
      let val = this.selectOrg;
      if (this.userType.includes("政府")) {
        this.form.organization = val[val.length - 1];
      } else if(this.userType.includes('平台')) {
        this.form.organization = val.map((key) => key[key.length - 1]);
      }
    },

handleChange这一步是转换cascader的数据为需要的数组。这一步注意区分单选和多选的转换方式不同。记得在不选择的情况下，也需要handleChange处理一次，给后端的数组数据要经过处理。

重点是回显！！！

2. 回显の泪

        if (this.record.platform === 1) {
          // platform
          this.platformDecorate();
        } else if (this.record.platform === 2) {
          // government
          this.form.organization = this.record.orgList[0].id;
          this.decorate();
        } else {
          // enterprise
          this.form.organization = this.record.enterpriseId;
        }

这里注意decorate，用于转换出回显的数组。回显的重点是从叶子找到他的生长路径，这里用到一个递归层层向下的函数。

  decorate() {
      let arr = this.changeDetSelect(
        this.form.organization,
        this.options.organizations
      );
      this.selectOrg = arr;
    },
    platformDecorate() {
      let arr = this.record.orgList.map((key) => {
        return this.changeDetSelect(key.id, this.options.organizations);
      });
      this.selectOrg = arr;
    },
   

 //回显(多级)
    changeDetSelect(key, treeData) {
      let arr = []; // 在递归时操作的数组
      let returnArr = []; // 存放结果的数组
      let depth = 0; // 定义全局层级
      // 定义递归函数
      function childrenEach(childrenData, depthN) {
        for (var j = 0; j < childrenData.length; j++) {
          depth = depthN; // 将执行的层级赋值 到 全局层级
          arr[depthN] = childrenData[j].id;
          if (childrenData[j].id == key) {
            returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组，截断并保存到结果数组，
            break;
          } else {
            if (childrenData[j].children) {
              depth++;
              childrenEach(childrenData[j].children, depth);
            }
          }
        }
        return returnArr;
      }
      return childrenEach(treeData, depth);
    },

参考

回显的递归函数是一个简书的作者写的，我找不到了......