elementui树形下拉框,element树形菜单拖拽
元素用户界面官网提供的树形控件包含基础的、可选择的、自定义节点内容的、带节点过滤的以及可拖拽节点的树形结构，本文实现了树形控件整合带图标的下拉菜单，感兴趣的可以了解一下
目录
需求说明：实现步骤：本文主要讲述：自定义树形控件埃尔树
需求说明：
元素用户界面官网提供的树形控件包含基础的、可选择的、自定义节点内容的、带节点过滤的以及可拖拽节点的树形结构如下：
我想要的效果是支持搜索效果的树，将鼠标悬浮后显示添加修改图标，点击图标后弹出对应页面；并且在每个文件夹前添加自定义图标。
实现效果：
实现步骤：
1、使用插槽（插槽)
el-col :span=4 :xs=24
！-目录搜索功能-
div class=头容器
埃尔输入
v-model=dirNameCn
占位符=请输入目录名称
可清除的
大小=小
前缀图标=el图标搜索
style=margin-bottom: 20px
/
/div
！-树的展示-
div class=头容器
埃尔树
:data=dirTreeOptions
:props=defaultProps
:expand-on-click-node=false
:filter-node-method=filterNode
ref=tree
默认-展开-全部
@node-click=handleNodeClick
El-icon-folder-open
node-key=id
：点击检查节点=真
！-隐藏的新增等图标-
span class= custom-tree-node slot-scope= { node，data } @ mouseenter= mouseenter(data) @ mouseleave= mouseleave(data)
span{{ node.label }}/span
差异
我要展示数据。show class= El-icon-circle-plus style= color:# 00 AFFF @ click= addDial(node，data)/
！-隐藏的下拉选-
El-drop down trigger= click placement= right @ command=(command)={ handle command(command)}
我要展示数据。show class= El-icon-more style= color:# d3d 3d 3 /
El-下拉菜单-菜单slot=dropdown
El-下拉列表-项目命令=a 重命名/El-下拉列表项
El-下拉列表-项目命令=b 删除/El-下拉列表项
/El-下拉菜单
/El-下拉列表
/div
/span
/el-tree
/div
/el-col
2、组件对应的射流研究…
注意：树的数据是从后端查询回来的，保存在dirTreeOptions里面
脚本
导出默认值{
名称：请求八叉树，
data() {
返回{
//左侧搜索框内容
目录名称： ,
//目录树选项
dirTreeOptions:未定义，
defaultProps: {
孩子："孩子",
标签:"标签"
},
//树形菜单中有无子节点
是孩子：未定义，
//控制左侧新增提示信息框
显示：0,
//查询需求文档信息参数
查询参数：{
单据号：未定义，//文档编号
文档名称：未定义，//文档英文名称
dirNo:未定义，//目录编号
电流：1,//当前页数
尺寸：20个/件每页显示多少条
},
treeId:未定义，
}
},
方法：{
/** 查询需求目录下拉树结构*/
getTreeselect() {
treeselect().然后(响应={
这个。dirtreeoptions=响应。数据
})
},
//搜索值为过滤函数
过滤器节点(值，数据){
如果(!值)返回真
return data.label.indexOf(value)！==-1
},
//节点被点击时的回调函数
handleNodeClick(数据){
//console.log(数据)
this.treeId=data.id
this.yesChild=data.children
this.queryParams.dirNo=data.id
this.getList()
},
//树中三个点的事件
句柄命令(命令){
if (command==a) {
selectReqNo(this.treeId).然后(响应={
this.uuid=response.msg
getObjTree(response.msg)。然后(response={
this.form=response.data
this.open=true
This.title=修改需求文档目录配置表
})
})
}
if (command==b) {
if (this.yesChild！=未定义){
这个。$notify.error({
标题：“警告”，
消息：“此目录中有其他文件夹”
})
}否则{
selectReqNo(this.treeId)。然后(response={
this.uuid=response.msg
这个。$confirm(确实要删除ID为 this.uuid 的数据项吗？，警告，{
ConfirmButtonText:确定，
CancelButtonText:取消，
类型：“警告”
}).然后(()={
返回delObjTree(this.uuid)
}).然后(data={
this.getTreeselect()
This.msgSuccess(“删除成功”)
}).catch(function() {
})
})
}
}
},
//在左边创建一个新的目录/文件
addDial(节点，数据){
//console.log(节点，-，数据)
this.reset()
this.form.dirParentId=data.id
this.open=true
This.title=添加需求文档目录配置表
},
//鼠标左键悬停显示图标。
鼠标输入(数据){
这个。$set(数据，显示，真)
},
//鼠标左键离开，不显示图标
鼠标离开(数据){
这个。$set(数据，显示，假)
},
//打开新资源的弹出窗口，此处省略。
}
}
/脚本
描述：
参照：元素UI下拉选择和树形控件集成
关于元素树控件中下拉菜单与图标的集成的文章到此结束。有关元素中带有图标的下拉菜单的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。