基于iview的自定义下拉树组件,超详细讲解

最近由于项目的需求表单里需要用到下拉树选项,但iview里面并没有这个组件,所以我基于iview的select组件和tree组件进行了二次封装,实现了这个组件。这里面也借鉴了这位朋友的思路https://www.jianshu.com/p/0ce52f43864e不过感觉他有很多坑都没有仔细说明,所以下面我将的比较详细

先说下我所实现的功能:
1.点击选择并显示到select


展开下拉框.jpg

选择完选项.jpg

2.修改回填时根据回填的id展示对应的name,并在树中选中所回填的子节点且展开这个子节点所有的父节点


修改回填时的.jpg

打开选项框展示所选择的节点并展开路径.jpg

话不多说,上代码分析。




          

    

上面代码的data属性就是表单中需要双向绑定的的值,width是调整宽度,而tree属性则是需要传入的线性数组,注意不是树形结构的数组,在这个组件中会将传入的线性数组自动转换成树形结构。
这里注意表单一般要默认清空值,所以我用了v-if来清空上一次的选择的数据,changeModel是子组件返回的函数。
下面是组件的html



                    
                    

你可能感兴趣的:(基于iview的自定义下拉树组件,超详细讲解)