vue下拉菜单树 vue实现下拉菜单树

时间:2021-03-15 单飞吧人气:0

想了解vue实现下拉菜单树的相关内容吗，单飞吧在本文为您仔细讲解vue下拉菜单树的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：vue下拉菜单树,vue下拉菜单,vue菜单树，下面大家一起来学习吧。

效果：使用 Vue-Treeselect 实现

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

npm install --save @riophae/vue-treeselect

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

<!-- 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>

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

加载全部内容