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

第Element树形控件整合带图标的下拉菜单(tree+dropdown+input)目录需求说明：实现步骤：本文主要讲述：自定义树形控件el-tree

需求说明：

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

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

实现效果：

实现步骤：

1、使用插槽（slot）

el-col:span="4":xs="24"

!--目录搜索功能--

div

el-input

v-model="dirNameCn"

placeholder="请输入目录名称"

clearable

size="small"

prefix-icon="el-icon-search"

/div

!--树的展示--

div

el-tree

:data="dirTreeOptions"

:props="defaultProps"

:expand-on-click-node="false"

:filter-node-method="filterNode"

ref="tree"

default-expand-all

@node-click="handleNodeClick"

icon-node-key="id"

:check-on-click-node="true"

!--隐藏的新增等图标--

spanslot-scope="{node,data}"@mouseenter="mouseenter(data)"@mouseleave="mouseleave(data)"

span{{node.label}}/span

div

iv-show="data.show"@click="addDial(node,data)"/

!--隐藏的下拉选--

el-dropdowntrigger="click"placement="right"@command="(command)={handleCommand(command)}"

iv-show="data.show"/

el-dropdown-menuslot="dropdown"

el-dropdown-itemcommand="a"重命名/el-dropdown-item

el-dropdown-itemcommand="b"删除/el-dropdown-item

/el-dropdown-menu

/el-dropdown

/div

/span

/el-tree

/div

/el-col

2、组件对应的JS

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

script

exportdefault{

name:'reqmdoctree',

data(){

return{

//左侧搜索框内容

dirNameCn:'',

//目录树选项

dirTreeOptions:undefined,

defaultProps:{

children:"children",

label:"label"

//树形菜单中有无子节点

yesChild:undefined,

//控制左侧新增提示信息框

show:0,

//查询需求文档信息参数

queryParams:{

docNo:undefined,//文档编号

docNameEn:undefined,//文档英文名称

dirNo:undefined,//目录编号

current:1,//当前页数

size:20//每页显示多少条

treeId:undefined,

methods:{

/**查询需求目录下拉树结构*/

getTreeselect(){

treeselect().then(response={

this.dirTreeOptions=response.data

//搜索值为过滤函数

filterNode(value,data){

if(!value)returntrue

returndata.label.indexOf(value)!==-1

//节点被点击时的回调函数

handleNodeClick(data){

//console.log(data)

this.treeId=data.id

this.yesChild=data.children

this.queryParams.dirNo=data.id

this.getList()

//树中三个点的事件

handleCommand(command){

if(command=='a'){

selectReqNo(this.treeId).then(response={

this.uuid=response.msg

getObjTree(response.msg).then(response={

this.form=response.data

this.open=true

this.title='修改需求文档目录配置表'

if(command=='b'){

if(this.yesChild!=undefined){

this.$notify.error({

title:'警告',

message:'此目录下还有别的文件夹'

}else{

selectReqNo(this.treeId).then(response={

this.uuid=response.msg

this.$confirm('是否确认删除ID为'+this.uuid+'的数据项？','警告',{

confirmButtonText:'确定',

cancelButtonText:'取消',

type:'warning'

}).then(()={

returndelObjTree(this.uuid)

}).then(data={

this.getTreeselect()

this.msgSuccess('删除成功')

}).catch(function(){

//左侧新建目录/文件

addDial(node,data){

//console.log(node,'---',data)

this.reset()

this.form.dirParentId=data.id

this.open=true

this.title='添加需求文档目录配置表'

//左侧鼠标悬浮展示图标

mouseenter(data){

this.