vue-treeselect是一个多选组件,具有对Vue.js的嵌套选项支持。

  • 具有嵌套选项支持的单个和多个选择
  • 模糊匹配
  • 异步搜索
  • 延迟加载(仅在需要时加载深层选项的数据)
  • 键盘支持(使用Arrow Up&Arrow Down键导航,使用键选择选项Enter等)
  • 丰富的选项和高度可定制
  • 支持各种浏览器

需要Vue 2.2+

一、基本使用流程

1、首先npm'安装依赖

npm install @riophae/vue-treeselect --save

2、然后在需要使用的组件中引入

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

3、声明组件

components: { Treeselect }

4、使用

 <treeselect
:options="dataList" //接受数组
placeholder="请选择上级菜单"
v-model="form.parentId"
/>

二、树结构下拉框示例

  

<treeselect
:options="optionsMechanism"
placeholder="select...."
v-model="value"/>
data(){
return{
value:null,
optionsMechanism:[{
id: 'fruits',
label: 'Fruits',
children: [ {
id: '',
label: 'Apple ',
isNew: true,
}, {
id: 'grapes',
label: 'Grapes ',
}, {
id: 'pear',
label: 'Pear

Vue.js学习(八)—— 树形结构下拉框组件vue-treeselect的更多相关文章

  1. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  2. jQuery EasyUI/TopJUI创建树形表格下拉框

    jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...

  3. js实现可输入的下拉框

    <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> ...

  4. vue自定义下拉框组件

    创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...

  5. 第二百二十七节,jQuery EasyUI,ComboTree(树型下拉框)组件

    jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...

  6. 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

    jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...

  7. 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件

    jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...

  8. Combo( 自定义下拉框) 组件

    本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于ValidateBox(验证框)组件 一. 加载方式自定义下拉框不能通过标签的方式进行创建.<input ...

  9. 从后台绑定数据到ligerui 的comboBox下拉框组件

    这次来记录一下ligerUI的comboBox下拉框组件,ligerUI的API里也有相关描写叙述,上面都是前台写死数据,然后显示在组件中,我这次要说的是将后台的数据绑定到下拉框组件中,废话不多说. ...

随机推荐

  1. 字节跳动2020-ByteCamp暑期夏令营研发组习题

    概要 本文主要是记录字节2020夏令营的笔试习题,解答部分待日后不断完善. 选择题部分记录不是很完全,剩下没有被收录的大都偏容易. 单项选择题 箱子里有20个红球,18个白球,逐一随机抽取球,问整个过 ...

  2. [转] 总结了N个真实线上故障

    以下文章来源于架构师进阶之路 ,作者二马读书 1. JVM频繁FULL GC快速排查 在分享此案例前,先聊聊哪些场景会导致频繁Full GC: 内存泄漏(代码有问题,对象引用没及时释放,导致对象不能及 ...

  3. JQuery插件,轻量级表单模型验证

    附上源码和Demo段 var validataForm = (function(model) { model.Key = "[data-required='true']"; mod ...

  4. 009_go语言中的slices分片

    代码演示 package main import "fmt" func main() { s := make([]string, 3) fmt.Println("emp: ...

  5. GitLab CI/CD 配置

    GitLab CI/CD 配置 概念 持续集成的相关概念,可以看这篇文章 持续集成是什么? - 阮一峰的网络日志 操作示例 创建测试项目 sample-web,然后打开项目的 Runners 配置 找 ...

  6. C#LeetCode刷题之#342-4的幂(Power of Four)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4058 访问. 给定一个整数 (32 位有符号整数),请编写一个函 ...

  7. C#LeetCode刷题之#551-学生出勤纪录 I​​​​​​​(Student Attendance Record I)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3953 访问. 给定一个字符串来代表一个学生的出勤纪录,这个纪录仅 ...

  8. Js~对键值对操作

    键值对主要是面向对象语言里的字典,或者叫哈希表,它通过键(key)可以直接访问到值(value),所以它查找的时间复杂度是O(1),即一次查找即可找到目标:在.net里有Dictionary,而在ja ...

  9. 用过 mongodb 吧, 这三个大坑踩过吗?

    一:背景 1. 讲故事 前段时间有位朋友在微信群问,在向 mongodb 中插入的时间为啥取出来的时候少了 8 个小时,8 在时间处理上是一个非常敏感的数字,又吉利又是一个普适的话题,后来我想想初次使 ...

  10. 关于MapReduce默认分区策略

    MapReduce默认分区策略 mapreduce 默认的分区方式是hashPartition,在这种分区方式下,KV对根据key的hashcode值与reduceTask个数进行取模,决定该键值对该 ...