前言
最近在开发时遇到一个问题，是在输入框里面放一个树形组件。查看饿了吗之后发现都不太行
最后在网上搜了一下，真的是有相关的组件Treeselect，确实有相关文章说明，但是比较乱。
在数据配置项，多选，只能选子级都是有现成封装好的属性的，可以直接使用。
在这里记录一下，Treeselect全局使用
代码实现
1.下包
npm install treeselect -S
2.注册为全局组件很多地方要用-第一次记得在main.js中引入（主页文章有）
// 输入框树形组件import Treeselect from '@riophae/vue-treeselect'export default {// install全局引入 vue中一个方法// 第1个参数是标签名称，第2个参数是一个选项对象install (Vue) {// 注册组件ponent('Treeselect', Treeselect)}}
3.main.js引入样式
// 下拉框全局组件样式import '@riophae/vue-treeselect/dist/vue-treeselect.css'
4.页面结构-deptID绑定的值-及相关使用
// :show-count="true" 显示树性结构每一集有多少条数据// multiple 多选属性，多选时v-model是一个数组// :disable-branch-nodes="true" 只能选子级，父级不能选择// 当我们树形结构层级超过3级时，v-model绑定值，可能只会停留在3级，可以加上面属性就解决了<treeselectstyle="width: 220px;"v-model="deptID":show-count="true":options="deptOptions":normalizer="normalizer"placeholder="选择维保班组"/>
5.data数据
data() {return {// 绑定值deptID:null,// 树结构选择数据deptOptions: []}}
6.methods方法-相当于tree树结构配置
methods:{// 树结构格式配置-跟element Tree树结构配置项一样normalizer(node) {if (node.children && !node.children.length) {delete node.children;}return {id: node.deptId,label: node.deptName,children: node.children,};},}
总结：
经过这一趟流程下来相信你也对 Vue- Treeselect组件使用（下拉框树形结构） 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！
什么不足的地方请大家指出谢谢 -- 風过无痕
