Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《Vue-3-Treeviewでツリービューの実装》

#プログラム #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回はNuxt3でツリービュー表示を表現できる「Vue-3-Treeview」についてご紹介します。簡単にチェックボックスベースのツリービューを実現できるので、是非ご覧ください。

使用するライブラリ

今回は下記ライブラリを使用します。

Vue.js: 3.4.21
Nuxt.js: 3.11.1
vue3-treeview: 0.4.2

vue3-treeviewの追加

初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。

npm install vue3-treeview

これで対象のプロジェクトに、ライブラリを追加することができました。

次に実際のライブラリの使用方法について解説していきます。

プロジェクト構成

今回は下記のプロジェクト構成で作業を行っていきます。

Vueファイル

今回サンプル用に作成した、Vueファイルを下記に記載します。

– index.vue

<template>
    <div style="margin-left: 20px;">
        <h2>vue3-treeviewサンプル</h2>
        <Tree
            :config="config"
            :nodes="data"
            @nodeChecked="checkEvent"
            @nodeUnchecked="uncheckedEvent"
        ></Tree>
        <button @click="checkValue()">チェック状態確認</button>
    </div>
</template>
<script setup>
import 'vue3-treeview/dist/style.css'
import Tree from 'vue3-treeview'
import { ref, reactive } from 'vue'

const config = ref({
    // 親のチェックボックスのID
    roots: ["sanple1", "sample2", "sample3"],
    // チェックボックスの表示の有無
    checkboxes: true,
    // 親のチェックボックスをチェックした際に子もチェック
    checkMode: 0
})

const data = reactive({
    sanple1: {
        // チェックボックスで表示するテクスト内容を設定
        text: "サンプル1",
        // チェックボックスの子とする要素名を設定
        children: ["sanple11", "sanple12", "sanple13"],
        state: {
            // 初期で子要素を展開して表示
            opened: true,
            // 初期でのチェック状態を設定
            checked: false
        }
    },
    sanple11: {
        text: "サンプル1-1",
        children: [],
    },
    sanple12: {
        text: "サンプル1-2",
        children: [],
    },
    sanple13: {
        text: "サンプル1-3",
        children: [],
    },
    sample2: {
        text: "サンプル2",
        children: ["sample21"],
        state: {
            // 初期で子要素を展開して表示
            opened: true,
            // 初期でのチェック状態を設定
            checked: false
        }
    },
    sample21: {
        text: "サンプル2-1",
        // さらに子の要素を設定
        children: ["sample211"],
        state: {
            opened: true
        }
    },
    sample211: {
        text: "サンプル2-1-1",
        children: [],
    },
    sample3: {
        text: "サンプル3",
        children: ["sample31"]
        // 未設定なので初期では子要素が展開されない
    },
    sample31: {
        text: "サンプル3-1",
        children: [],
    }
})

/**
 * 現状のチェック状態を確認します。 
 */
const checkValue = () => {
    for (const index in data) {
        console.log(data[index].id + ": " + data[index].state.checked)
    }
}

/**
 * チェックイベント 
 */
const checkEvent = () => {
    console.log("チェック")
}

/**
 * アンチェックイベント 
 */
const uncheckedEvent = () => {
    console.log("アンチェック")
}
</script>

４行目～９行目：
ツリービューの表示を宣言するタグを記載しています。「config」には、ツリービューの表示設定を、「nodes」には表示を行うデータを設定しています。「@nodeChecked」はチェックがされた場合のイベント、「@nodeUnchecked」はチェックが外された場合のイベントを設定できます。

１４行目～１６行目：
ここでは「Vue-3-Treeview」を使用するための、CSSやライブラリのインポートを記載します。

１８行目～２５行目：
ツリービューの表示設定を、変数に記載しています。「roots」には親要素として表示するIDを設定します。「checkboxes」では、true or falseで設定ができ、true にすることでチェックボックスの表示を行えます。「checkMode」では親の要素をチェックした場合に、子要素もチェックを自動で設定するかの設定を行います。

２７行目～８３行目：
ツリービューに表示を行うデータを記載しています。細かい説明は、コメントで記載を行いましたのでご確認ください。

８５行目～９２行目：
こちらは今回表示を行っているチェックボックスのチェック状態を表示するサンプル用の関数となります。

９４行目～９９行目：
チェックボックスがチェックされたときに呼ばれる関数となります。

１０１行目～１０６行目：
チェックボックスからチェックが外されたときに呼ばれる関数となります。