一.前言
树形组件是我们经常用到的组件，主要场景就是：公司后台管理的部门管理，做文章目录等。
二.常用的几种方法及说明
1.node-click：节点被点击时的回调
共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
<div class="container"> <el-tree :data="data" show-checkbox node-key="id" ref="tree" highlight-current @node-click="clickFn" @check="check"></el-tree> </div>
clickFn (data, node, item) { console.log(data); console.log(node); console.log(item); }
2.check:当复选框被点击的时候触发
共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
<div class="container"> <el-tree :data="data" show-checkbox node-key="id" ref="tree" highlight-current @node-click="clickFn" @check="check"></el-tree> </div>
check (checkedNodes, checkedKeys) { // 获取选中节点的node对象 this.nodes = checkedKeys.checkedNodes; for (let i = 0; i < this.nodes.length; i++) { let a = this.$refs.tree.getNode(this.nodes[i].id); console.log(a); } },
3.check-change:节点选中状态发生变化时的回调
共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
4.getNode方法:根据 data 或者 key 拿到 Tree 组件中的 node
(data) 要获得 node 的 key 或者 data
getNode方法的用法：this.$refs.tree.getNode(this.nodes[i].id);
参数就是节点的id：就是node-key绑定的id
例如：node-key="name";this.$refs.tree.getNode(this.nodes[i].name);
具体看需求，前提是你树形data里面有这个属性
5.check-on-click-node
是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
6.default-expanded-keys
默认展开的节点的 key 的数组
三.我们实现标题中提到的需求主要用到check事件和getNode方法
check (checkedNodes, checkedKeys) { console.log(checkedNodes); console.log(checkedKeys); // 获取选中节点的node对象 this.nodes = checkedKeys.checkedNodes; for (let i = 0; i < this.nodes.length; i++) { let a = this.$refs.tree.getNode(this.nodes[i].id); console.log(a); } },
