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 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 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
生成缩略图
2006/10/09 PHP
如何把PHP转成EXE文件
2006/10/09 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
vue.js指令v-model使用方法
2017/03/20 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
Python内置数据类型详解
2014/08/18 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
操行评语大全
2014/04/30 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
七年级作文之雪景
2019/11/18 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript
java代码实现空间切割
2022/01/18 Java/Android
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python