近期工作总结#6

遇到一个很尴尬的问题

network里面有返回值，但是打印不出来，打印出来里面的值就是空的，然后经过询问排查才知道，console的打印的值存在内存里，但是如果你的代码有处理之后，在打印里面就会变成处理后的值，当你点开的时候，这个值在内存里放着，你点击的时候才会调用它，但是此时的值以及被处理过了，所以我打印出来的值就是空的，说的有点乱，上图！

这里我打印出来是1

这里我赋值b为2，打印出来自然是2，但是上面的b还是1对吧，咱们打开看看

！！！变成2了！！，很神奇对吧，这里就是点开查看的时候，浏览器会调用内存，此时内存里的b以及变成了2，所以会显示成2，这就是哪怕你的代码打印在前，操作在后，打印出来也还是操作后的值

之前有个业务，就是在点击ElementUI的tree组件时，在点击下的子组件增加一个在线离线的状态值

然后就出现问题了，我最开始的想法是点击后从后台接口获取到的值之后，遍历一边原数组，增加进去让tree自己更新，但是问题就出现在这里了！我的树是懒加载，他没办法精准的找到要更改的位置，一直都会有一个问题就是你点击前几个还好，都可以出现值，但是点击后面的就出不来了！！！
后来在网上冲浪的时候，查询如何让tree手动更新子节点，然后我发现可以直接获取子节点，这样我就可以不用遍历数组了，而且也可以精准的找到节点，这个业务以及优化了，特此记录一下，毕竟那个遍历我做了一周！！！

treeData.map((item) => {
      if (item.id == "根节点") {
        // 此id为根目录
        this.addStatus(statusData, item.children, treeDataIndex);
      } else {
        if (item.id == treeDataIndex  {
          item.children.map((citem) => {
            statusData.map((sitem) => {
              if (sitem.projectId == citem.id) {
                if (sitem.status === 1) {
                  if (citem.title.indexOf(" ") != -1) {
			// 这里用的方法就是在子节点上增加空格和全角空格，以此来判断是否在线
                    this.$set(citem, "title", citem.title);
                  } else {
                    this.$set(citem, "title", citem.title + " ");
                  }
                } else {
                  if (citem.title.indexOf("　") != -1) {
                    this.$set(citem, "title", citem.title);
                  } else {
                    this.$set(citem, "title", citem.title + "　");
                  }
                }
              }
            });
          });
          this.$forceUpdate();
          return;
        }
        if (item.id == treeDataIndex && item.hasChildren) {
          // 可以查到所有的，可以进行赋值操作，除二级节点外，即三级目录
          this.tempString = item.id;
          console.log("父级为所查找的id,且含有子级", item);
          this.addStatus(statusData, item.children, treeDataIndex);
          return;
        } else if (item.id != treeDataIndex && item.hasChildren) {
          console.log("父级不是所查找的id,且含有子级", item);
          // 查找三级目录
          item.children.map((citem) => {
            statusData.map((sitem) => {
              if (sitem.projectId == citem.id) {
                if (sitem.status === 1) {
                  if (citem.title.indexOf(" ") != -1) {
                    this.$set(citem, "title", citem.title);
                  } else {
                    this.$set(citem, "title", citem.title + " ");
                  }
                } else {
                  if (citem.title.indexOf("　") != -1) {
                    this.$set(citem, "title", citem.title);
                  } else {
                    this.$set(citem, "title", citem.title + "　");
                  }
                }
              }
            });
          });
          this.$forceUpdate();
          this.addStatus(statusData, item.children, treeDataIndex);
          return;
        }
      }
      });

更新后的代码

addStatus(node, result) {
      if (node.data.hasChildren) {
        node.childNodes.map((citem) => {
          result.data.data.map((sitem) => {
            if (sitem.projectId == citem.data.id) {
              if (sitem.status === 1) {
                if (citem.data.title.indexOf(" ") != -1) {
                  this.$set(citem.data, "title", citem.data.title);
                } else {
                  this.$set(citem.data, "title", citem.data.title + " ");
                }
              } else {
                if (citem.data.title.indexOf("　") != -1) {
                  this.$set(citem.data, "title", citem.data.title);
                } else {
                  this.$set(citem.data, "title", citem.data.title + "　");
                }
              }
            }
          });
        });
        let keys = this.$refs.tree.getCheckedKeys(); //取得当前选择的node-key
        this.$refs.tree.updateKeyChildren(keys, treeData); //更新node-key的子节点
      }
}