树形结构下拉框组件vue-treeselect的使用（安装、模糊匹配、单选、多选、延迟加载、异步搜索等）

一、基本使用流程

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="value"
/>

二、示例代码

1. 示例一

<template>
    <div>
        <treeselect v-model="deptIds" :options="deptList" :multiple="true" :disable-branch-nodes="false"
            :clear-on-select="true" :flat="true" :show-count="true" placeholder="请选择" />
    </div>
</template>
    
<script>

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

export default {
    components: {
        Treeselect
    },
    data() {
        return {
            deptList: [
                {
                    id: 1,
                    label: 'a',
                    children: [
                        {
                            id: 4,
                            label: 'aa',
                            children: [
                                {
                                    id: 6,
                                    label: 'aaa',
                                }
                            ],
                        }
                    ],
                },
                {
                    id: 2,
                    label: 'b',
                    children: [
                        {
                            id: 5,
                            label: 'bb',
                        }
                    ],
                },
                {
                    id: 3,
                    label: 'c',
                    children: [],
                },