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

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

代码附上