js比较两个数组对象,取出不同的值

直接上图

image.png

因为element级联选择器绑定值是二维数组:

 placeId:[
       [
        "4028812c72d4c6d20172d4de09560000",
         "4028812c72d57fa30172d58da4de0000",
         "4028812c72d57fa30172d5a8ce00000b", 
         "4028812c72d57fa30172d5a9b134000c"
         ],[
        "4028812c72d4c6d20172d4de09560000",
         "4028812c72d57fa30172d58da4de0000",
         "4028812c72d57fa30172d5a8ce00000b", 
        "ff808081746b7c4901751aaac39e000e"
         ],[
          "4028812c72d4c6d20172d4de09560000",
           "ff8080817288769f0172d4ecba800007"
          ]
        ]

后端要求把id:"",name:""形式传入

  placeId:[
      [
         {id: "4028812c72d4c6d20172d4de09560000", name: "1号楼"},
         {id: "4028812c72d57fa30172d58da4de0000", name: "位置1"},
         {id: "4028812c72d57fa30172d5a8ce00000b", name: "驱蚊器翁"},
         {id: "4028812c72d57fa30172d5a9b134000c", name: "1231230000"}
       ],[
         {id: "4028812c72d4c6d20172d4de09560000", name: "1号楼"},
         {id: "4028812c72d57fa30172d58da4de0000", name: "位置1"},
         {id: "4028812c72d57fa30172d5a8ce00000b", name: "驱蚊器翁"},
         {id: "ff808081746b7c4901751aaac39e000e", name: "测试3号楼"}
       ],[
         {id: "4028812c72d4c6d20172d4de09560000", name: "1号楼"},
         {id: "ff8080817288769f0172d4ecba800007", name: "名称"}
         ]
      ]

因为没有name值所以通过getCheckedNodes获取选中的节点数组：

var node = this.$refs.place.getCheckedNodes();
  过滤id和name
  let result = {};
   过滤选中节点数据
  node.filter((item) => {
      //组装id:name
      result[item.value] = item.label;
  });

过滤后的数据：

 result:{ 
  4028812c72d4c6d20172d4de09560000: "1号楼"
  4028812c72d57fa30172d5a8ce00000b: "驱蚊器翁"
  4028812c72d57fa30172d5a9b134000c: "1231230000"
  4028812c72d57fa30172d58da4de0000: "位置1"
  ff808081746b7c4901751aaac39e000e: "测试3号楼"
  ff8080817288769f0172d4ecba800007: "名称"
  }

循环element级联选择器绑定值,开始改造：

   var newArr = [];//目标二维数组
    for (var i = 0; i < this.form.placeId.length; i++) {
      let tmp = [];//目标一维数组
      for (var b = 0; b < this.form.placeId[i].length; b++) {
        //所有ID
        let id = this.form.placeId[i][b];
        let placeIdName = {
          id: id,
          //根据id获取name
          name: result[id],
        };
        //把一维数据放进去
        tmp.push(placeIdName);
      }
        //把二维数据放进去
      newArr.push(tmp);
    }
    console.log(newArr);

最后效果：

 [
  [
     {id: "4028812c72d4c6d20172d4de09560000", name: "1号楼"},
     {id: "4028812c72d57fa30172d58da4de0000", name: "位置1"},
     {id: "4028812c72d57fa30172d5a8ce00000b", name: "驱蚊器翁"},
     {id: "4028812c72d57fa30172d5a9b134000c", name: "1231230000"}
   ],[
     {id: "4028812c72d4c6d20172d4de09560000", name: "1号楼"},
     {id: "4028812c72d57fa30172d58da4de0000", name: "位置1"},
     {id: "4028812c72d57fa30172d5a8ce00000b", name: "驱蚊器翁"},
     {id: "ff808081746b7c4901751aaac39e000e", name: "测试3号楼"}
   ],[
     {id: "4028812c72d4c6d20172d4de09560000", name: "1号楼"},
     {id: "ff8080817288769f0172d4ecba800007", name: "名称"}
     ]
  ]

注：回显是需要原始二维数组哦，如果后端没有返回就需要自己重组