vue2 Elementui 树形组件怎么实现多选并获取选中节点的node对象

一.前言

树形组件是我们经常用到的组件，主要场景就是：公司后台管理的部门管理，做文章目录等。

二.常用的几种方法及说明

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