关于element级联选择器多层级关系的回显

一、效果图：

二、 思路及数据结构：

1、点击回显按钮时，需要获取到文件所在的所有分类id，并处理返回结果，id数组结构例如['2','3','4']

处理部分代码：

res.data.forEach((item) => {
            classList.push(item.classifyId);
          });

2、拿到平铺的所有分类集合，将这个数据存储为一个数组copySelectClassifyData，等会调用方法会用到。

该数组结构如下：

3、思路：

遍历当前文件所包含类型的所有id，查找该id是否有父级，没有则返回，有父级id继续拿父级id向上查找，其中，将所有id路径进行一个添加，采用arr.unshift()方式添加该回显类型id的路径结构。

注意：级联选择器的点击某个选项时的结构为

 三、代码部分

1、在点击回显的时候触发

  let arr2 = [];
      // 遍历当前包含的id
      classList.forEach((item) => {
        // 调用函数传入当前item项（id），平铺的全部分类，拿到返回结果
        let arr5 = this.huixianFn(item, this.copySelectClassifyData);
        // 依次添加到数组，等会渲染
        arr2.push(arr5);
      });
      // 级联选择器绑定的值
      this.copyForm.classifyList = arr2
      // 利用key值进行回显
      this.modalKey++;

arr2数组数据结构为

 2、在methods中封装一个函数

 // 封装一个函数回显多层级关系
    huixianFn(item, arr) {
      // 级联回显结构的最后一个数据为当前要显示的id
      let arr1 = [item];
      findParentIdFn(item, arr);
      return arr1;


      function findParentIdFn(id, arr) {
        // 查找到id的所有属性
        let obj = arr.find((a) => a.classifyId === id);
        // 判断是否有父级
        if (obj && obj.parentId) {
          // 依次向前添加
          arr1.unshift(obj.parentId);
          // 有父级继续向上查找
          findParentIdFn(obj.parentId, arr);
        }
      }
    },

3、选择器的代码

      <el-cascader
            :key="modalKey"
            size="medium "
            v-model="copyForm.classifyList"
            placeholder="选择分类类型"
            class="search-select"
            :options="searchClassifyData"
            :props="copyProps"
            :show-all-levels="false"
            @change="selectCopyListFn"
            clearable
          ></el-cascader>

以上个人理解，语言组织能力不是很好🐶🐶