1、问题引入
最近遇到了一个问题,一个下拉框需求进行树形展开选中,其中,iview组件库中有一个付费的 selectTree 组件可以实现此功能,但是这个组件由于付费的缘故,不便于查看翻阅官方的API文档,因此,我们可以自定义去实现这样的一个组件出来。效果图如下所示。
由于是公司的项目,数据信息不便展示。大致是如下所示描述的样子。
图示
那么这个自定义如何实现?首先我们可以利用 input 文本输入框以及 tree树形下拉配合使用达到预期的目的,
代码
代码
通过handleCheckChange方法去拿到当前项的部门名称
逻辑思路:先从后台接口拿到树形数据,将响应回来的数据给到当前实例对象的数据的treeData中去,此处的idArr数组是后期便于对树形数据进行处理做的类似于一个标记。
拿到树形数据
拿到数据后,树形下拉便可以展开了,这时假设需求是需要保存数据的操作,那么就需要传选中项的id给后台,
代码
return出去的是当前实例化对象的部门ID
代码
在调接口保存前,调用该方法拿到部门id,赋值到表单的部门id中去。