Vue.js学习（八）—— 树形结构下拉框组件vue-treeselect

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