树形组件浅知

别人写好的轮子，会用即可

首先，需要安装依赖，npm install --save @riophae/vue-treeselect 如果使用npm 不行 那么就使用 yarn add --save @riophae/vue-treeselect

然后在使用的地方引入即可

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

最后就是对照文档改为自己想要的样式了

不过需要注意树形数据的写法，分支结点和叶结点写法不同，对照文档来看

            <!--  <treeselect
                        name="demo"
                        :multiple="true"                   多选，true：打开，false：关闭
                        :clearable="clearable"             可清除（框框尾部的叉号），true：可清除，false：不可清除，默认值为true
                        :searchable="searchable"           模糊搜索：默认值为true
                        :disabled="disabled"               不能使用：默认值为false
                        :open-on-click="openOnClick"       点击打开，默认值为true
                        :open-on-focus="openOnFocus"       获得焦点打开，默认值为true
                        :clear-on-select="clearOnSelect"   清除选择，默认值为true
                        :close-on-select="closeOnSelect"   关闭选择框的时机：在选完一个选项之后就关闭，因此适用于单选时
                        :always-open="alwaysOpen"          一直打开选择框，并展开所有的子级，默认值为false
                        :append-to-body="appendToBody"     添加到主题  默认值为false
                        :options="options"                 数据
                        rtl: false,                        RTL模式  展开按钮放在右侧，默认是在左侧的，默认值为false
                        :limit="3"                         限制所选项的显示。多余的被隐藏在limitText字符串中，多选适用
                        :max-height="200"                  弹出的选择框的最大高度
                        :limitText="count => `+${count}`"  自定义提示文字，默认就是 and x more
                        :load-options="loadOptions"        懒加载，适用于数据量很大的情况，需要对分支节点做一些修改
                        :async="true"                      异步搜索
                        v-model="value"
                        :disable-branch-nodes="true"       禁用分支结点
                        有时候会遇到一些小BUG，就是当menuOptions没有数据时，页面初始化后会在选择框里显示：(unknown)  ，问题就在于queryParams.activity_group_id值不能写为"",要写成null
                  /> -->