el-tree懒加载中使用递归更改树节点状态值

问题描述

项目中使用树结构，主要信息一般在树的叶子节点上记录。但是有些情况下，后端是不把一些树叶子节点的状态信息做记录的，比如树叶子节点的状态（是否添加、是否收藏什么的），后端只是把树结构所需要的数据返回给前端，至于状态什么的，前端需要去记录，而且状态的更改，也是需要前端去记录更改的
我们先看一下项目的效果图：

效果图

功能分析

• 当我们点击左侧的叶子节点的时候，更改叶子节点成已添加的状态，同时将左侧的数据追加到右侧的表格中去：即：（点击叶子节点，更改叶子节点状态）
• 当我们再次点击叶子节点的时候，将叶子节点已添加的状态，修改成未添加的状态，同时删除右侧表格中的对应项：即：（点击叶子节点，更改叶子节点状态）
• 当我们删除右侧表格中的某一项时候，同时更改左侧的叶子节点的状态：即：（递归更改左侧树结构对应节点的状态）

本例是树组件懒加载的写法，关于树组件懒加载的写法，也可以参考我之前的一篇文章，传送门： https://segmentfault.com/a/11...

点击叶子节点，更改叶子节点状态

// 点击树组件节点上的添加或未添加按钮，更改树的添加未添加的状态，同时追加或删除右侧表格中对应的行的数据
 changeStatus(node, data) {
    // console.log("data是点击的这个树节点所绑定的数据", data);
    if (data.status == "0") {
      data.status = "1"; // 这里我们可以直接更改树节点上的对应数据，便会生效，未添加变成已添加
      this.tableData.push(data); // 追加进右侧表格
    } else if (data.status == "1") {
      data.status = "0"; // 已添加变成未添加
      this.tableData.forEach((item, index) => {
        // 同时，根据id去删除掉右侧的数据
        if (item.id == data.id) {
          this.tableData.splice(index, 1);
        }
      });
    }
  }

注意html中的这个changeStatus方法是点击按钮的高阶函数的写法，这样： @click="() => changeStatus(node, data)"

递归更改左侧树结构对应节点的状态

// 第一步：根据删除或者id，然后根据id递归更改树节点状态字段
// 第二步：把表格中的数据删除即可
removeRow(row) {
  // console.log("行数据", row.id);

  // 获取tree的所有的node节点数组（DOM节点），这里是两个数组，对应的就是西游记和三国演义的最外层的数组（）
  let allNodesDom = this.$refs.myTree.root.childNodes;
  console.log("node节点树结构", allNodesDom);

  function bianli(checkedData) {
    for (const i in checkedData) {
      // 说明到最内层了
      if (checkedData[i].childNodes.length == 0) {
        // 到最内层以后，就看看对应的id，是否与移除行的id一致
        if (checkedData[i].data.id == row.id) {
          // 若id一致，就更改树组件的最内层节点的数据即可
          checkedData[i].data.status = "0";
          break;
        }
      } else if (checkedData[i].childNodes.length > 0) {
        // 说明没到最内层，那就继续递归调用自己，继续找
        bianli(checkedData[i].childNodes);
      }
    }
    return;
  }
  bianli(allNodesDom); // 递归调用，更改数据

  // 同时根据id删除右侧的表格对应的行
  this.tableData.forEach((item, index) => {
    if (item.id == row.id) {
      this.tableData.splice(index, 1);
    }
  })
}

代码附上

关于本篇文章的前后端的完整代码，欢迎到我的Gitee上下载哈，后端用express模拟数据接口返回前端，传送门如下 https://gitee.com/ah-shuai/de...