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

问题描述

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

效果图

el-tree懒加载中使用递归更改树节点状态值_第1张图片

功能分析

  • 当我们点击左侧的叶子节点的时候,更改叶子节点成已添加的状态,同时将左侧的数据追加到右侧的表格中去:即:(点击叶子节点,更改叶子节点状态)
  • 当我们再次点击叶子节点的时候,将叶子节点已添加的状态,修改成未添加的状态,同时删除右侧表格中的对应项:即:(点击叶子节点,更改叶子节点状态)
  • 当我们删除右侧表格中的某一项时候,同时更改左侧的叶子节点的状态:即:(递归更改左侧树结构对应节点的状态)
本例是树组件懒加载的写法,关于树组件懒加载的写法,也可以参考我之前的一篇文章,传送门: 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...

你可能感兴趣的