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

 

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-24/161719.html，文章来源：网络cs，作者：亙句，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！