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);
    }
  })
}

代码附上

<template>
  <div class="box">
    <!-- 左侧树部分 -->
    <div class="leftBox">
      <el-tree ref="myTree" :props="props" :load="loadNode" lazy node-key="id">
        <span slot-scope="{ node, data }">
          <i
            class="el-icon-folder-opened"
            style="color: #448ff7"
            v-show="node.isLeaf !== true"
          ></i>
          <!-- <span style="padding-left: 8px">{{ node.label }}</span> -->
          <span style="padding-left: 8px">{{ data.name }}</span>
          <el-button
            style="margin-left: 12px"
            size="small"
            type="text"
            v-show="node.isLeaf === true"
            @click="() => changeStatus(node, data)"
          >
            <span :class="{ highLightTree: data.status == '0' }">{{
              data.status == "0" ? "未添加" : "已添加"
            }}</span>
          </el-button>
        </span>
      </el-tree>
    </div>
    <!-- 右侧表格部分 -->
    <div class="rightBox">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{
          height: '48px',
          background: '#FAFAFA',
          color: '#333333',
          fontWeight: 'bold',
        }"
      >
        <el-table-column prop="id" label="id编号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="home" label="地址"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="removeRow(scope.row)"
              type="danger"
              plain
              size="small"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: "name",
        isLeaf: "isLeaf",
      },
      tableData: [],
    };
  },
  methods: {
    //初始加载最外层节点
    loadNode(node, resolve) {
      // 点击节点加载相应节点的数据
      if (node.level == 0) {
        this.loadfirstnode(resolve);
      }
      //如果展开其他级节点，动态从后台加载下一级节点列表
      if (node.level >= 1) {
        this.loadchildnode(node, resolve);
      }
    },
    //加载第一级节点
    async loadfirstnode(resolve) {
      let params = {
        level: 0,
      };
      const res = await this.$api.getTreeData(params);
      return resolve(res.data);
    },
    //加载节点的子节点集合
    async loadchildnode(node, resolve) {
      // console.log("超过二级的", node, node.level);
      let params = {
        id: node.key,
      };
      const res = await this.$api.getTreeChildData(params);
      return resolve(res.data);
    },

    // 点击树组件节点上的添加或未添加按钮，更改树的添加未添加的状态，同时追加或删除右侧表格中对应的行的数据
    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);
          }
        });
      }
    },

    // 第一步：根据删除按钮获得对应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);
        }
      })
    }
    
  },
};
</script>

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