Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

这篇博客主要介绍树形控件的两个小小的功能：

• 下拉菜单
• 输入过滤框

以CSS样式为主，也会涉及到Vue组件和element组件的使用。

对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。
使用Vue + Element UI，构建出最基本的树如下图所示：

最简单的树结构

现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。

一、下拉菜单

将下拉菜单嵌到树节点中，使操作更加简便、紧凑。

效果演示

效果如图：

• 图示1：悬浮在树节点状态

  
  
  悬浮在树节点状态

• 图示2：点击三个点图标状态

  
  
  点击三个点图标状态

• 图示3： 选中并选择菜单

  
  
  下拉菜单效果

如上，当鼠标悬浮在树节点上时，出现竖着的三个小点，点击时弹出下拉菜单，显示可以对树节点进行的操作。

实现步骤

1、使用插槽（slot） + 子组件

• 父组件（含有树形控件）模板代码

 
                
                    

                        
                            {{ node.label }}
                        
                                        
                            
                        
                    
                
            

2、 DotDropdown 下拉框代码

很多树形结构都会使用该下拉框，所以定义组件，方便复用。