Form Select Tooltip UI Components vue.js ライブラリ

ツリー状にネストされた複数選択セレクトメニュー「vue-treeselect」

ツリー状にネストされた複数選択セレクトメニュー「vue-treeselect」

vue-treeselectとは

vue-treeselectは、ツリー状にネストされた複数選択のセレクトメニューコンポーネントライブラリです。

あいまい一致や非同期検索、遅延ロードをサポートしています。

 

ツリー状にネストされた複数選択セレクトメニュー「vue-treeselect」

 

環境

Vue 2.6.10
vue-treeselect 0.4.0

 

インストール

以下のnpmCDNを使ってインストールします。

npm

npm install --save @riophae/vue-treeselect

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.min.css">
<script src="https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.umd.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/riophae/vue-treeselect

 

導入手順

1. ライブラリの取り込み

(1)webpack等の場合 [注意]モジュール版は未検証です。

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

(2)WEBページの場合

const Treeselect = window['VueTreeselect'].default;

2.メソッドを設定

上記で取得したTreeselectcomponentsプロパティに取り込みます。

new Vue({
  el: '#app',
  components: { 
    'treeselect':Treeselect
  },
  data: {
    value: null,
    options: [
      {
        id: 'a',
        label: 'a',
        children: [
          { id: 'aa', label: 'aa' }, 
          { id: 'ab', label: 'ab' } 
        ],
      }, 
      { id: 'b', label: 'b' }, 
      { id: 'c', label: 'c' } 
    ],
  }
});

3. テンプレートを準備

<treeselect>を設置します。

 

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <treeselect v-model="value" :multiple="true" :options="options"></treeselect>
</div>

 

サンプル

>>専用ページで確認する

 

さいごに

vue-treeselectは、ツリー状にネストされた複数選択のセレクトメニューコンポーネントライブラリでした。

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Form, Select, Tooltip, UI Components, vue.js, ライブラリ
-, , , ,