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 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
详解jQuery事件
Jan 13 Javascript
AngularJS中的promise用法分析
May 19 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
JavaScript实现点击图片换背景
Nov 20 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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
解析Python中的二进制位运算符
2015/05/13 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Scrapy的简单使用教程
2017/10/24 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
关于Python作用域自学总结
2019/06/10 Python
深入了解Django中间件及其方法
2019/07/26 Python
Python shutil模块用法实例分析
2019/10/02 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
党员创先争优活动总结
2014/05/04 职场文书
2014年师德承诺书
2014/05/23 职场文书
团队口号大全
2014/06/06 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
群众路线表态发言材料
2014/10/17 职场文书
2015年人事科工作总结
2015/04/28 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
对学校的意见和建议
2015/06/04 职场文书
领导视察通讯稿
2015/07/18 职场文书
工作服管理制度范本
2015/08/06 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
nginx 添加http_stub_status_module模块
2022/05/25 Servers
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers