Vue实现树形下拉框

此为自己写的一个完整的前后分离项目： Vue完整前后台项目介绍

Vue自身并没有实现树形下拉框的组件，找了很多资料，最后在Github上找了个插件vue-treeselect，功能还是比较全的，模糊搜索、多选、延迟加载、异步搜索、排序，自定义、Vuex支持等等。这些功能在官网上都有详细的介绍：

vue-treeselect官网： vue-treeselect

vue-treeselect github地址： vue-treeselect

下面只做个简单的功能介绍，模糊搜索与树形结构展示：

当然，首先是下载安装插件：

npm install --save @riophae/vue-treeselect

安装成功之后，就可以进行测试了，下面是我的测试vue:

这个插件默认的数据结构为：

{
    "id" : "",
    "label" : "",
    "children" : []
}

我们从数据库查出来的数据肯定不是这个样子的啦，所以需要在页面中转换一下数据结构，这个逻辑看一下代码中的函数 getTree()。在提醒一下，如果当前分类下面没有子分类的话，就不需要children这个属性了。

上述运行成功之后，在界面上就可以看到具体的结构了：

默认情况是这样的：

展开之后是这样的：

模糊搜索之后是这样的：

选中某个分类之后，与之绑定的data属性就会得到分类的id值：

这样一个简单的下拉树结构就出来了，更复杂的功能可以参考官网来写，其中例子都很全面