问题描述
项目中使用树结构，主要信息一般在树的叶子节点上记录。但是有些情况下，后端是不把一些树叶子节点的状态信息做记录的，比如树叶子节点的状态（是否添加、是否收藏什么的），后端只是把树结构所需要的数据返回给前端，至于状态什么的，前端需要去记录，而且状态的更改，也是需要前端去记录更改的
我们先看一下项目的效果图：
效果图
功能分析
- 当我们点击左侧的叶子节点的时候，更改叶子节点成已添加的状态，同时将左侧的数据追加到右侧的表格中去：即：
（点击叶子节点，更改叶子节点状态） - 当我们再次点击叶子节点的时候，将叶子节点已添加的状态，修改成未添加的状态，同时删除右侧表格中的对应项：即：
（点击叶子节点，更改叶子节点状态） - 当我们删除右侧表格中的某一项时候，同时更改左侧的叶子节点的状态：即：
（递归更改左侧树结构对应节点的状态）
本例是树组件懒加载的写法，关于树组件懒加载的写法，也可以参考我之前的一篇文章，传送门： https://juejin.cn/post/7013675152432955400
点击叶子节点，更改叶子节点状态
// 点击树组件节点上的添加或未添加按钮，更改树的添加未添加的状态，同时追加或删除右侧表格中对应的行的数据
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/demo-of-el-tree
