1、介绍

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

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

官方网站：Vue-Treeselect | Vue-Treeselect 中文网

2、入门使用

2.1 npm安装依赖

npm install --save @riophae/vue-treeselect

2.2 使用的组件中引入

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

2.3 声明组件

components: { Treeselect }

2.4 使用组件

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

注意：由于vue-treeselect设置多选和单选，所以选择的数据checkdata，单选的时候设置null（单选的时候必须初始化为null，否则会有unknow错误），多选的时候设置为数组。

3、入门案例

以下为多选案例，multiple多选属性，设置为true为多选，不设置默认为false单选。

<!-- 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>