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

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

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

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

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

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

            <!--  <treeselectname="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/> -->