网络编程
位置:首页>> 网络编程>> JavaScript>> vue实现下拉菜单树

vue实现下拉菜单树

作者:单飞吧  发布时间:2024-05-09 15:18:39 

标签:vue,下拉菜单

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

效果:使用 Vue-Treeselect 实现

vue实现下拉菜单树

建议通过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组件的教程,请大家点击专题vue.js组件学习教程进行学习。

来源:https://blog.csdn.net/weixin_44640323/article/details/109174222

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com