iview组件库：树形组件自定义实现以及后台返回的树形数据前端如何去处理

1、问题引入

      最近遇到了一个问题，一个下拉框需求进行树形展开选中，其中，iview组件库中有一个付费的 selectTree 组件可以实现此功能，但是这个组件由于付费的缘故，不便于查看翻阅官方的API文档，因此，我们可以自定义去实现这样的一个组件出来。效果图如下所示。

     由于是公司的项目，数据信息不便展示。大致是如下所示描述的样子。

图示

那么这个自定义如何实现？首先我们可以利用 input 文本输入框以及 tree树形下拉配合使用达到预期的目的，

代码

代码

通过handleCheckChange方法去拿到当前项的部门名称

逻辑思路：先从后台接口拿到树形数据，将响应回来的数据给到当前实例对象的数据的treeData中去，此处的idArr数组是后期便于对树形数据进行处理做的类似于一个标记。 

拿到树形数据

拿到数据后，树形下拉便可以展开了，这时假设需求是需要保存数据的操作，那么就需要传选中项的id给后台，

代码

return出去的是当前实例化对象的部门ID

代码

在调接口保存前，调用该方法拿到部门id，赋值到表单的部门id中去。