【vue】el-tree获取选中的父子数据，拼json

目录

一、前言

二、需求

三、关于el-tree走的弯路

四、解决办法

第一步

第二步(问题解决的关键)

第三步

---

一、前言

真就是前端小白了，这个el-tree折磨了我一晚！这个我必须要好好记录下！！！请看清我的需求，如果你的需求和我的差不多，那么理解本文就够了。

二、需求

万恶之源 拼json

后端传给我一个树的数据结构，我需要用el-tree来显示，并对其操作，然后再返回数据给到后端用来存储。

（后端返回给我的数据样式）

我用el-tree将其显示出来的是全部的数据，下面我要选择其中的一部分，再传递回去。那么

后端需要我传给他这样的数据模式如下面红色格式，那么就意味着，我又要拼json了！

content_json：一级加二级的树形json,

{"show":[{"name":"老爸","list":["孩子1","孩子2"]},{"name":"老妈","list":["乖孩子1","乖孩子2"]}]}

三、关于el-tree走的弯路

基本的用法，我就不废话了，基本上大家都会。

但是！这个@check方法！！根本就没必要行嘛。我一直在纠结，到底用@check还是用@node-click！用node-click可以获取父子的，但是不是check的效果.....然后一顿折腾，换来换去，因为我陷入了误区，以为只有用这种点击方法，才能获取到父子节点的值。所以走了很多弯路，行了我不墨迹自己走的弯路了，感兴趣我们电话聊行嘛，一宿我都能唠。

四、解决办法

 不用这些点击事件，咱们直接！

在传数据的方法里面，直接处理数据。

第一步

用给的方法去接选中的数据。获取选中的信息。这个就够了

let nodes = this.$refs.multipleTable.getCheckedNodes();

（这里注意：父节点的信息，只有在你子节点全选的情况下，才会返回。没事，别慌。）

---

第二步(问题解决的关键)

下面处理我们的树的数据 => treeData 

在原来的树的数据上，在选中的节点处，加个select，来标记我们有没有选中。遍历treeData，再遍历里面的children，过滤选中的guid和原数据里的guid相等的情况，判定被选中。然后给选中的父节点和子节点加select字段。

（这里面的guid，是后端返给我treeData数据里面的标识，可以理解为原组件里面父子节点的id。）

 this.treeData.map((item) => {
        item.children.map((child) => {
          let exists = nodes.filter((sel) => sel.guid == child.guid);
          if (exists.length > 0) {
            item.select = true;
            child.select = true;
          }
        });
  });

这样处理后，原treeData就会变化，选中的数据，treeData里面就会多一个select字段，表示选中。选中后返回的treeData。

---

第三步

拼数据，声明一个空数组，然后拼成需要传给后端的数据格式。

{"show":[{"name":"老爸","list":["皮孩子1","皮孩子2"]},{"name":"老妈","list":["乖孩子1","乖孩子2","乖孩子3"]}]}

  let arr = [];
      this.treeData.map((item) => {
        if (item.select) {
          let node = {};
          node.name = item.name;
          node.list = [];
          item.children.map((child) => {
            if (child.select) {
              node.list.push(child.name);
            }
          });
          arr.push(node);
        }
      });

arr的输出为：[{"name":"老爸","list":["皮孩子1","皮孩子2"]},{"name":"老妈","list":["乖孩子1","乖孩子2","乖孩子3"]}]

最后在传数据给后端的时候
 content_json: { show: arr }

可以了。