vue实现下拉菜单树


Posted in Javascript onOctober 22, 2020

本文实例为大家分享了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组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
JS 文字符串转换unicode编码函数
May 30 Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 #Javascript
Node.js fs模块原理及常见用途
Oct 22 #Javascript
使用vue构建多页面应用的示例
Oct 22 #Javascript
vue 单页应用和多页应用的优劣
Oct 22 #Javascript
Javascript Symbol原理及使用方法解析
Oct 22 #Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 #Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 #Javascript
You might like
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
python3爬取各类天气信息
2018/02/24 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
python用post访问restful服务接口的方法
2018/12/07 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python画图高斯分布的示例
2019/07/10 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
干部培训工作总结2015
2015/05/25 职场文书
创业计划书介绍
2019/04/24 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS