问题描述项目采用树状结构，主要信息一般记录在树的叶子节点上。但是在某些情况下，后端并没有记录一些树叶子节点的状态信息，比如树叶子节点的状态（是否添加，是否收集），后端只是返回树需要的数据structure到前端，至于状态，前端需要记录，状态的变化也需要前端记录变化。我们来看一下项目的效果图：效果图的功能分析当我们点击左边的叶子节点，改变叶子节点的同时，将左边的数据添加到右边的表中：即是：（点击叶子节点可以改变叶子节点的状态）当我们再次点击叶子节点时，叶子节点的已添加状态将被修改为未添加状态，并删除表中的对应项right:即：（点击叶子节点改变叶子节点的状态）当我们删除右边表中的一项时，同时改变左边的叶子节点状态：即：（递归改变左边树结构中对应节点的状态）这个例子就是树组件的懒加载。树组件的懒加载，也可以参考我之前的文章，传送门：https://segmentfault.com/a/11...点击叶子节点可以改变叶子节点的状态//点击树组件节点上的添加或不添加按钮，改变树的添加或未添加状态，添加或删除右侧表格对应行的数据changeStatus(node,data){//console.log("data是被点击树节点绑定的数据",data);如果(data.status=="0"){数据。状态=“1”；//这里我们可以直接更改树节点上对应的数据，就会生效，不添加就变成添加了。这个.tableData.push(数据);//附加到右边的表格}elseif(data.status=="1"){data.status="0";//添加变成不添加this.tableData.forEach((item,index)=>{//同时根据id删除右边的item边数据if(item.id==data.id){this.tableData.splice(index,1);}});}}注意在html中这个changeStatus方法是点击按钮的高阶函数的写法，所以：@click="()=>changeStatus(node,data)"递归改变左边树结构中对应节点的状态//第一步：根据删除按钮id获取，然后根据id递归改变树节点状态字段//第二步：删除表中对应的数据removeRow(row){//console.log("行数据",row.id);//得到树的所有节点节点数组（DOM节点），这里是两个数组，分别对应西游记和三国志的最外层数组()letallNodesDom=this.$refs.myTree.root.子节点；安慰。log("节点节点树结构",allNodesDom);functionbianli(checkedData){for(constiincheckedData){//表示到达最内层if(checkedData[i].childNodes.length==0){//到达最内层后，检查是否对应id与被移除行的id一致if(checkedData[i].data.id==row.id){//如果id相同，改变树组件最里面节点的数据可以checkedData[i].data.status="0";休息;}}elseif(checkedData[i].childNodes.length>0){//表示没有到达最内层，那么就继续递归调用自己，继续找bianli(checkedData[i].childNodes);}}返回;}bianli(allNodesDom);//递归调用，改变数据//并根据id删除右边表对应的行this.tableData.forEach((item,index)=>{if(item.id==row.id){this.tableData.splice(index,1);}})}代码附加上
