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

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

  • 下拉菜单
  • 输入过滤框

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

对于没有层级的数据,我们可以使用表格或卡片来展示。要展示或建立层级关系,就一定会用到树形组件了。
使用Vue + Element UI,构建出最基本的树如下图所示:
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)_第1张图片
现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景。

一、下拉菜单

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

效果演示

效果如图:

  • 图示1:悬浮在树节点状态
    Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)_第2张图片

  • 图示2:点击三个点图标状态
    Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)_第3张图片

  • 图示3: 选中并选择菜单
    Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)_第4张图片

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

实现步骤

1、使用插槽(slot) + 子组件

  • 父组件(含有树形控件)模板代码
 
                
                    
{{ node.label }}

2、 DotDropdown 下拉框代码

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



                    
                    

你可能感兴趣的:(Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input))