Vue.js vue-treeselectの簡単な使い方
- 作成日 2020.02.05
- 更新日 2020.07.21
- Vue.js
- vue-treeselect, Vue.js

vue.jsのライブラリ「vue-treeselect」を使用して、ツリー状のselectboxを実装する簡単なサンプルコード。
環境
- OS CentOS 8.0.1905 (Core)
- node v12.13.1
- npm 6.13.2
- @vue/cli 4.1.1
※CentOS8にVue.jsの環境構築はこちら
Vue環境構築
下記のコマンドで構築。今回は、vueappという名前でプロジェクトを作成してます。
vue create vueapp
プロジェクト作成時は、defaultを選択してます 。
Vue CLI v4.1.1? Please pick a preset: default (babel, eslint)
vue-treeselectインストール
下記の手順でインストールします。
## 移動
cd vueapp
## インストール
vue i -S @riophae/vue-treeselect
vue-treeselect使い方
src配下のApp.vueを下記のように編集します。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { Treeselect },
data() {
return {
// define the default value
value: null,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
}
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0 auto;
width: 600px;
}
</style>
起動します。
npm run serve
ブラウザから http://プライベートIP:8080 に アクセスするとoptionsに設定したデータがtree上に表示されることが確認できます。

-
前の記事
CentOs8に開発言語 nimをインストールしてHello Worldする 2020.02.05
-
次の記事
Vue.js vue-event-calendarをインストールしてカレンダーにイベントを追加する 2020.02.05
コメントを書く