vue实现下拉菜单树

215 阅读 0 评论 142 点赞

我是靠谱客的博主会撒娇指甲油，这篇文章主要介绍vue实现下拉菜单树，现在分享给大家，希望可以做个参考。

本文实例为大家分享了vue实现下拉菜单树的具体代码，供大家参考，具体内容如下

效果：使用 Vue-Treeselect 实现

建议通过npm安装vue-treeselect，并使用webpack之类的捆绑器来构建您的应用程序。

复制代码

1
npm install --save @riophae/vue-treeselect

官网实例配置属性请查看官网

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!-- Vue SFC -->
<template>
 <div id="app">
 <treeselect v-model="value" :multiple="true" :options="options" />
 </div>
</template>

<script>
 // import the component
 import Treeselect from '@riophae/vue-treeselect'
 // import the styles
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'

 export default {
 // register the component
 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>