Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

目录

• 需求说明：
• 实现步骤：

本文主要讲述：自定义树形控件

需求说明：

Element UI 官网提供的树形控件包含基础的、可选择的、自定义节点内容的、带节点过滤的以及可拖拽节点的树形结构 如下：

我想要的效果是支持搜索效果的树，将鼠标悬浮后显示添加修改图标，点击图标后弹出对应页面；并且在每个文件夹前添加自定义图标。

实现效果：

实现步骤：

1、使用插槽（slot）

   
  

    
  
  
  

    
      
      
        {{ node.label }}
        

          
          
          
            
            
              重命名
              删除
            
          
        

      
    
  

2、组件对应的JS

注意：树的数据是从后端查询回来的，保存在dirTreeOptions里面

说明：

参考文档：element UI、树形控件整合下拉选

到此这篇关于Element树形控件整合带图标的下拉菜单(tree+dropdown+input)的文章就介绍到这了,更多相关Element带图标的下拉菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！