Tree 树形控件的显示和更改

如图这种树形控件的显示和内容修改的实现问题，我做的需求最多层级是三级内容。

首先在请求成功的函数中去遍历请求回来的数据如下：

let obj = {};
let myList = [];
for (let item of this.roleRightList) {
              // debugger
              if(item.children){
                for (let item1 of item.children) {
                  if(item1.checked){
                    if(item1.children){
                      for (let item2 of item1.children) {
                        if (item2.checked) {
                          if(item2.children){
                            for (let item3 of item2.children) {
                              if (item3.checked) {
                                obj.id = item3.id;
                                obj.label = item3.name;
                                myList.push(JSON.parse(JSON.stringify(obj)));
                                this.$nextTick(() => {
                                  this.$refs.tree.setCheckedNodes(myList);
                                });
                              }
                            }
                          }else {
                            obj.id = item2.id;
                            obj.label = item2.name;
                            myList.push(JSON.parse(JSON.stringify(obj)));
                            this.$nextTick(() => {
                              this.$refs.tree.setCheckedNodes(myList);
                            });
                          }
                        }else {
                          if(item2.children){
                            for (let item3 of item2.children) {
                              if (item3.checked) {
                                obj.id = item3.id;
                                obj.label = item3.name;
                                myList.push(JSON.parse(JSON.stringify(obj)));
                                this.$nextTick(() => {
                                  this.$refs.tree.setCheckedNodes(myList);
                                });
                              }
                            }
                          }
                        }
                      }
                    }else {
                      obj.id = item1.id;
                      obj.label = item1.name;
                      myList.push(JSON.parse(JSON.stringify(obj)));
                      this.$nextTick(() => {
                        this.$refs.tree.setCheckedNodes(myList);
                      });
                    }
                  } else {
                    if(item1.children){
                      for (let item2 of item1.children) {
                        if(item2.checked){
                          obj.id = item2.id;
                          obj.label = item2.name;
                          myList.push(JSON.parse(JSON.stringify(obj)));
                          this.$nextTick(() => {
                            this.$refs.tree.setCheckedNodes(myList);
                          });
                        }
                      }
                    }
                  }
                }
              }
            }

 

在标签上面这样写：

        <el-tree
          :data="roleRightList"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          @check="handleCheckChange"
          :props="defaultProps">
        </el-tree>

这样就把从后台请求回来的checked为true的显示出来了。

下面开始实现修改之后将修改的数据传给后台，如果只修改一条数据就将这条数据的id和checked传给后台，如果修改了父级就把父级以及子级对应的id和checked放在一个list中传给后台：

handleCheckChange(data, checked, indeterminate) {
      // debugger
      let obj = {};
      let obj2 = {};
      if (data.children) {
        // debugger
        if(data.checked){
          obj2.checked = false;
        } else {
          obj2.checked = true;
        }
        obj2.id = data.id;
        this.params.push(JSON.parse(JSON.stringify(obj2)));

        for (let i in data.children) {
          if(data.checked){
            obj2.checked = false;
          } else {
            obj2.checked = true;
          }
          obj2.id = data.children[i].id;
          this.params.push(JSON.parse(JSON.stringify(obj2)));

          if(data.children[i].children){
            // if(data.children[i].checked){
            if(data.checked){
              obj2.checked = false;
            } else {
              obj2.checked = true;
            }
            obj2.id = data.children[i].id;
            this.params.push(JSON.parse(JSON.stringify(obj2)));
            for (let j in data.children[i].children) {
              // if(data.children[i].checked){
              if(data.checked){
                obj2.checked = false;
              } else {
                obj2.checked = true;
              }
              obj2.id = data.children[i].children[j].id;
              this.params.push(JSON.parse(JSON.stringify(obj2)));
              if(data.children[i].children[j].children){
                // if(data.children[i].children[j].checked){
                if(data.checked){
                  obj2.checked = false;
                } else {
                  obj2.checked = true;
                }
                obj2.id = data.children[i].children[j].children.id;
                this.params.push(JSON.parse(JSON.stringify(obj2)));
                for(let p in data.children[i].children[j].children){
                  // if(data.children[i].children[j].checked){
                  if(data.checked){
                    obj2.checked = false;
                  } else {
                    obj2.checked = true;
                  }
                  obj2.id = data.children[i].children[j].children[p].id;
                  this.params.push(JSON.parse(JSON.stringify(obj2)));
                  if(data.children[i].children[j].children[p].children){
                    // if(data.children[i].children[j].children[p].checked){
                    if(data.checked){
                      obj2.checked = false;
                    } else {
                      obj2.checked = true;
                    }
                    obj2.id = data.children[i].children[j].children[p].id;
                    this.params.push(JSON.parse(JSON.stringify(obj2)));
                    for(let b in data.children[i].children[j].children[p].children){
                      // if(data.children[i].children[j].children[p].checked){
                      if(data.checked){
                        obj2.checked = false;
                      } else {
                        obj2.checked = true;
                      }
                      obj2.id = data.children[i].children[j].children[p].children[b].id;
                      this.params.push(JSON.parse(JSON.stringify(obj2)));
                    }
                  }
                }
              }
            }
          }
        }
      }else {
        if (data.checked) {
          obj.checked = false;
        } else {
          obj.checked = true;
        }
        obj.id = data.id;
        this.params.push(JSON.parse(JSON.stringify(obj)));
      }
    },

第一次做树形需求，代码可能还需进一步完善。