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

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

 

转载请说明出处内容投诉
CSS教程_站长资源网 » vue2 Elementui 树形组件怎么实现多选并获取选中节点的node对象

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买