vue---cascader级联传递参数

碰到个需求需要用到级联选择器，就是想实现多选吧，这个选择器的难点就是传参的问题，后端如何接收这个参数，对接的时候不同后端要求传递的参数还不一样，我真的是无语。。。。，就拿这次传参做个记录吧。

1、选中时组件返回的原始值

组件返回的值，就是一个二维数组，咱们只需要将二维数组转换成想要的数据就行了，来看下原始值，这是我选中之后，返回的一组一组的值，一共16个，要做的就是解构一下

2、解构成树状结构

这是结构成功之后的，将第一层作为父节点，每个父节点下面有多个子节点，然而后端说这样不行。。

上代码： treeData(arr)，其中arr为这个组件返回的二维数组

    // 返回树形结构
    treeData(arr) {
      const tree = [];
      arr.forEach((item) => {
        const list = this.arrList(item);
        this.mergeList(tree, list);
      });
      return tree;
    },
    //合并相同的父节点函数
    mergeList(tree, list) {
      if (!tree) {
        return;
      }
      const hasCommonParent = tree.some((treeItem) => {
        // 如果有相同的父节点
        if (treeItem.name == list[0].name) {
          this.mergeList(treeItem.child, list[0].child);
          return true;
        }
        return false;
      });
      if (!tree.length || !hasCommonParent) {
        tree.push(list[0]);
      }
    },
    //将二维数组中单条数组转换成树状的
    arrList(arr) {
      const list = [];
      const head = {
        name: arr[0],
        child: [],
      };
      let prev = head;
      list.push(prev);
      for (let i = 1; i < arr.length; i++) {
        const current = {
          name: arr[i],
          child: [],
        };
        prev.child.push(current); //prev push list里 prev直接变化
        prev = current; // prev又变为 current ，list里prev不会变化
      }
      return list;
    },

3、结构成字符串

说到字符串，就要说到拼接，每个父节点使用";“分割。子节点使用”,"分割。例如：
父,子,子,子;父,子,子,子;父,子,子,子;，这样的一个字符串。

上代码吧，这个就很简单了，循环解构一下就能得到

       let str = "";
       let sendList = JSON.parse(JSON.stringify(树状结构后的数组));
       sendList.forEach((item) => {
         let name = item.child.map((child) => child.name).join(",");
         let batchNo = item.name + "," + name;
         str += batchNo + ";";
       });
   console.log(str);

4、Map结构

这个Map结构啊，还和java有点出入，先看效果吧，这是使用js创建的map

调整打印后，说是要的这样的

上代码：

        let sendList = this.treeData(组件返回原始值);
        let map = new Map();
        sendList.forEach(({ name, child }) => {
          map.set(name, []);
          child.forEach(({ name: childName }) => {
            map.get(name).push(childName);
          });
        });
        
         //调整后的代码
        let mapObj = this.strMapToObj(map);
        //单拎出来个函数
      strMapToObj(strMap) {
      let obj = Object.create(null);
      for (let [k, v] of strMap) {
        obj[k] = v;
      }
      return obj;
    },

就这了，有后续再写