一.前言

樹形組件是我們經(jīng)常用到的組件，主要場景就是：公司后臺管理的部門管理，做文章目錄等。

二.常用的幾種方法及說明

1.node-click：節(jié)點被點擊時的回調(diào)

共三個參數(shù)，依次為：傳遞給?data?屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點對應(yīng)的 Node、節(jié)點組件本身。

<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:當(dāng)復(fù)選框被點擊的時候觸發(fā)

共兩個參數(shù)，依次為：傳遞給?data?屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、樹目前的選中狀態(tài)對象，包含 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) {
            // 獲取選中節(jié)點的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:節(jié)點選中狀態(tài)發(fā)生變化時的回調(diào)

共三個參數(shù)，依次為：傳遞給?data?屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點本身是否被選中、節(jié)點的子樹中是否有被選中的節(jié)點

4.getNode方法:根據(jù) data 或者 key 拿到 Tree 組件中的 node

(data) 要獲得 node 的 key 或者 data

getNode方法的用法：this.$refs.tree.getNode(this.nodes[i].id);

參數(shù)就是節(jié)點的id：就是node-key綁定的id

例如：node-key="name";this.$refs.tree.getNode(this.nodes[i].name);

具體看需求，前提是你樹形data里面有這個屬性

5.check-on-click-node

是否在點擊節(jié)點的時候選中節(jié)點，默認(rèn)值為 false，即只有在點擊復(fù)選框時才會選中節(jié)點。

6.default-expanded-keys

默認(rèn)展開的節(jié)點的 key 的數(shù)組

三.我們實現(xiàn)標(biāo)題中提到的需求主要用到check事件和getNode方法

check (checkedNodes, checkedKeys) {
            console.log(checkedNodes);
            console.log(checkedKeys);
            // 獲取選中節(jié)點的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);
            }
        },

?文章來源地址http://www.zghlxwxcb.cn/news/detail-568804.html

到了這里，關(guān)于vue2 Elementui 樹形組件怎么實現(xiàn)多選并獲取選中節(jié)點的node對象的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！