Element树形控件整合带图标的下拉菜单(tree+dropdown+input)
作者:星海少年 发布时间:2023-07-02 16:45:35
标签:Element,树形控件,图标,下拉菜单
本文主要讲述:自定义树形控件<el-tree>
需求说明:
Element UI 官网提供的树形控件包含基础的、可选择的、自定义节点内容的、带节点过滤的以及可拖拽节点的树形结构 如下:
我想要的效果是支持搜索效果的树,将鼠标悬浮后显示添加修改图标,点击图标后弹出对应页面;并且在每个文件夹前添加自定义图标。
实现效果:
实现步骤:
1、使用插槽(slot)
<el-col :span="4" :xs="24">
<!--目录搜索功能-->
<div class="head-container">
<el-input
v-model="dirNameCn"
placeholder="请输入目录名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<!--树的展示-->
<div class="head-container">
<el-tree
:data="dirTreeOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
default-expand-all
@node-click="handleNodeClick"
icon-class="el-icon-folder-opened"
node-key="id"
:check-on-click-node="true"
>
<!--隐藏的新增等图标-->
<span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
<span>{{ node.label }}</span>
<div>
<i v-show="data.show" class="el-icon-circle-plus" style="color: #00afff" @click="addDial(node, data)"/>
<!--隐藏的下拉选-->
<el-dropdown trigger="click" placement="right" @command="(command) => {handleCommand(command)}">
<i v-show="data.show" class="el-icon-more" style="color: #D3D3D3"/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">重命名</el-dropdown-item>
<el-dropdown-item command="b">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</span>
</el-tree>
</div>
</el-col>
2、组件对应的JS
注意:树的数据是从后端查询回来的,保存在dirTreeOptions
里面
<script>
export default {
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) return true
return data.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(()=>{
return delObjTree(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.$set(data, 'show', true)
},
// 左侧鼠标离开不展示图标
mouseleave(data){
this.$set(data, 'show', false)
},
//打开新增资源弹窗 这里略......
}
}
</script>
说明:
参考文档:element UI、树形控件整合下拉选
来源:https://blog.csdn.net/weixin_45606067/article/details/118965331
0
投稿
猜你喜欢
- Python是什么Python(大蟒蛇)是一门解释型、面向对象、带有动态语义的高级程序设计语言。Python 是一门有条理的和强大的面向对象
- 在之前介绍PyQtGraph的文章中,我们都是一次性的获取数据并将其绘制为图形。然而在很多场景中,我们都需要对实时的数据进行图形化展示,比如
- 这篇文章主要介绍了通过python连接Linux命令行代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
- QQWry.dat数据可以去百度搜索最新版本<%'======================================
- MYSQL数据库以它短小、方便、速度快、免费等优点成为很多网站目前首选数据库,但一般都是用PHP+MYSQL相结合来开发各种动态页面,其实A
- 判断字符串s.isalnum() #所有字符都是数字或者字母s.isalpha() #所有字符都是字母s.isdigit() #所有字符都是
- 本文实例讲述了Python实现正弦信号的时域波形和频谱图。分享给大家供大家参考,具体如下:# -*- coding: utf-8 -*-#
- 迭代器迭代器(iterator)有时又称游标(cursor)是程式设计的软件设计模式,可在容器物件(container,例如链表或阵列)上遍
- 不论什么时候,只要系统带有多个设备,而这些设备的性能又各不相同,就存在从慢速设备到快速设备不断更换工作地点以改善系统性能的可能性,这就是缓存
- 异步编程一直是JavaScript 编程的重大事项。关于异步方案, ES6 先是出现了 基于状态管理的 Promise,然后出现了 Gene
- 短几年,Google 的 Logo 已经象 Nike 的挑勾和 NBC 的孔雀图案一样著名了。Ruth Kedar,Google
- 引言 今天和测试沟通一个百分比计算方式时遇到一个问题, 我在存储过程里用到了强转
- 我经常使用json进行存储配置,于是常常遇到这样的问题:如果想要对某个数组里的值进行模糊搜索,同时输出相关的其他数组相同位置的的值该如何实现
- 前言本文使用 cpu 的 tensorflow 2.8 来完成 GRU 文本生成任务。如果想要了解文本生成的相关概念,可以参考我之前写的文章
- 安装包 PyCharm笔者使用PyCharm2018.3.2,请根据机器是64位还是32位来选择对应的PyCharm版本。(相信绝大部分人都
- 本文记录了Anaconda2安装NLTK的方法,供大家参考,具体内容如下先看我的python和Anaconda版本启动anaconda命令窗
- 做数据分析、科学计算等离不开工具、语言的使用,目前最流行的数据语言,无非是MATLAB,R语言,Python这三种语言,但今天小编简单总结了
- 年底,抽奖这个话题很多人都会讨论,都希望可以中奖。接下来我就使用 Python 中的 Tkinter 模块来实现一个简单的滚动抽奖器。一、T
- 本文给出一条 SQL 语句用于展示在同一名服务器上,不同的数据库间查询,注意当前连接用户要对两个库都有权限SQL Server 中 SQL
- 1 使用Flask处理表单什么是表单(Form)? 表单是搜集用户数据信息的各种表单元素的集合区域。它的作用是实现用户和服务器的数据交互。通