element-ui el-tree功能应用

news2024/11/19 14:38:54

在这里插入图片描述
1.目录节点搜索功能:

	<el-tree>
		:filter-node-method="filterNode"
	</el-tree>
	//添加监听
	watch: {
        search(val) {
            this.$refs.tree.filter(val)
        }
    },
    // 树搜索
    filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
    },

2.目录节点点击事件:

	<el-tree>
		@node-click="handleNodeClick"
	</el-tree>
	// 目录节点点击
    handleNodeClick(e, node) {
        
    },

3.目录刷新保持当前结构不变:

	<el-tree>
        @node-expand="handleNodeExpand"
        @node-collapse="handleNodeCollapse"
	</el-tree>
	// 树节点展开
       handleNodeExpand(data) {
           // 保存当前展开的节点
           let flag = false
           this.defaultExpandIds.some(item => {
               if (item === data.id) {
                   flag = true
                   return true
               }
           })
           if (!flag) {
               this.defaultExpandIds.push(data.id)
           }
       },
       // 树节点关闭
       handleNodeCollapse(data) {
           // 删除当前关闭的节点
           this.defaultExpandIds.some((item, i) => {
               if (item === data.id) {
                   this.defaultExpandIds.splice(i, 1)
               }
           })
           this.removeChildrenIds(data)
       },
       // 删除树子节点
       removeChildrenIds(data) {
           const ts = this
           if (data.children) {
               data.children.forEach(function(item) {
                   const index = ts.defaultExpandIds.indexOf(item.id)
                   if (index > 0) {
                       ts.defaultExpandIds.splice(index, 1)
                   }
                   ts.removeChildrenIds(item)
               })
           }
       },

4.目录节点拖拽(增加只允许在同级目录拖拽):

	<el-tree>
        :allow-drop="allowDrop"
         @node-drop="dropSuccess"
	</el-tree>
	// 拖动改变菜单位置
    dropSuccess(node, entryNode, place, event) {
        const updateList = []
        const childList = entryNode.parent.childNodes
        childList.forEach((item, index) => {
            updateList.push({ id: item.data.id, pid: item.data.pid, sort: index + 1 })
        })
        //后台数据库接口
        updateOrders(updateList)
    },
    // 拖拽时判定目标节点能否被放置(只能同级放置)
    allowDrop(draggingNode, dropNode, type) {
        if (draggingNode.level === dropNode.level) {
            if (draggingNode.data.pid === dropNode.data.pid) {
                return type === 'prev' || type === 'next'
            } else {
                return false
            }
        } else {
            // 不同级进行处理
            return false
        }
    },

5.完整代码:

		  <div class="left">
                <div class="search">
                    <el-input v-model="search" class="search-input" placeholder="请输入关键字" />
                    <div class="ali-icon-chaxun"></div>
                </div>
                <div class="left-container">
                    <el-tree
                        ref="tree"
                        draggable
                        :default-expanded-keys="defaultExpandIds"
                        :data="menuList"
                        node-key="id"
                        highlight-current
                        :filter-node-method="filterNode"
                        :allow-drop="allowDrop"
                        @node-click="handleNodeClick"
                        @node-expand="handleNodeExpand"
                        @node-collapse="handleNodeCollapse"
                        @node-drop="dropSuccess"
                    >
                        <template #default="{ data }">
                            <span class="custom-tree-node">
                                <span v-if="data.introduce == '0'" class="ali-icon-wj-wjj" style="margin-right: 5px"></span>
                                <span v-if="data.introduce == '1'" class="ali-icon-leixing" style="margin-right: 5px"></span>
                                <span>
                                    {{ data.name }}
                                </span>
                            </span>
                        </template>
                    </el-tree>
                </div>
            </div>
<style scoped>
.left {
  width: 20%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  box-shadow: 3px 1px 4px #ccc;
}

.search {
  width: 80%;
  height: 30px;
  margin: 15px auto;
  position: relative;
}
.ali-icon-chaxun {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
::v-deep(.search-input .el-input__wrapper) {
  padding-right: 35px;
  width: 262px;
}
::v-deep(.el-input__wrapper) {
  width: 91%;
}
.left-container {
  position: absolute;
  left: 5%;
  top: 60px;
  bottom: 15px;
  width: 88%;
  overflow: auto;
}
.left-container::-webkit-scrollbar-thumb {
background: transparent;
}

::v-deep(.el-form-item__label) {
  color: #333333;
}
.left-container :deep(.el-tree) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

.left-container::-webkit-scrollbar-thumb {
background: #999999;
}
::v-deep.el-tree {
  display: inline-grid;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/699612.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安装MySQL实现远程访问链接---无需本地访问

文章目录 1. 安装Mysql2. 安装phpMyAdmin3. 修改User 表4. 本地测试连接5. 安装cpolar6. 配置公网访问地址7. 固定连接公网地址 转载自cpolar极点云文章&#xff1a;群晖NAS 安装 MySQL远程访问连接 群晖安装MySQL具有高效、安全、可靠、灵活等优势&#xff0c;可以为用户提供一…

mysql索引之B+树

1.概述 提到B树就不得不提及二叉树&#xff0c;平衡二叉树和B树这三种数据结构了。B树就是从他们三个演化来的。众所周知B树是一种常见的数据结构&#xff0c;被广泛应用于数据库和文件系统等领域&#xff0c;B树的设计目标是保持树的平衡性&#xff0c;以提供稳定的性能&…

磐石呼叫中心系统经常被UDP攻击的解方法

语音系统经常被UDP攻击&#xff0c;UDP攻击是一种常见的网络攻击形式&#xff0c;经常针对语音、视频和在线游戏等实时传输数据的应用程序。攻击者使用大量的UDP数据包向目标服务器发送请求&#xff0c;导致服务器过载&#xff0c;使其无法处理有效的请求&#xff0c;从而导致服…

01-基本数据类型和注释

基本数据类型 使用编程语言进行编程时&#xff0c;需要用到各种变量来存储各种信息。变量保留的是它所存储的值的内存位置。这意味着&#xff0c;当您创建一个变量时&#xff0c;就会在内存中保留使用一些空间。 您可能需要存储各种数据类型&#xff08;比如字符型、整型、浮…

C++数据结构笔记(3)线性表的链式存储底层实现

本系列的帖子并不包含全部的基础知识&#xff0c;只挑一部分最核心的知识点总结&#xff0c;着重于具体的实现细节而并非理论的知识点总结&#xff0c;大家按需阅读学习。 链表的核心概念总结如下&#xff1a; 1.链式存储不需要连续的内存空间 2.链表由一系列的结点组成&…

阿里云ECS U实例评测

参与ECSU实例评测&#xff0c;申请免费体验机会&#xff1a;https://developer.aliyun.com/mission/review/ecsu What u1实例是什么&#xff1f; u1实例本质上还是ecs服务器&#xff0c;但是是阿里云推出的一种新型实例规格族 阿里云根据使用场景和业务场景将ecs划分为不同的…

如何使用低代码推动企业数字转型

企业创建其所需数字解决方案的方式和速度正在发生历史性变化。企业可以通过各种方式来实现这一转型&#xff0c;低代码作为其中一种转型方式&#xff0c;也越来越受到企业的喜欢&#xff0c;帮助企业适应不断变化的条件。下面我们用天翎低代码平台为例&#xff0c;浅谈一下&…

人脸考勤签到升级篇

目录 编写签到成功页面&#xff08;移动端&#xff09; 实现考勤成功页面&#xff08;持久层&#xff09; 实现考勤成功页面&#xff08;业务层&#xff09; 实现考勤成功页面&#xff08;Web层&#xff09; 一、查询用户的入职日期 二、实现查询考勤结果的Web方法 实现…

8年资深测试总结,性能测试-性能内存详解,揭秘你的疑惑...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 缓存 从 free 命令…

python实现基于SVD矩阵分解的电影推荐系统设计

大家好&#xff0c;我是带我去滑雪&#xff01; SVD 是一种矩阵分解技术&#xff0c;通过将空间维数从 N 维降到 K 维&#xff08;其中K<N&#xff09;来减少数据集的特征数。在推荐系统中&#xff0c;SVD 被用作一种协同过滤技术。使用矩阵结构&#xff0c;其中行表示用户&…

CC2530 外部中断配置步骤

第一章 硬件原理图分析 第二章 配置按键中断步骤

Python:通过飞书API接口发送通知消息

通过飞书发送应用消息&#xff0c;及时收到线上异常消息 总的来说&#xff0c;飞书消息发送的前戏&#xff0c;要比企业微信和钉钉稍复杂 相关连接 官网 https://www.feishu.cn/管理后台 https://www.feishu.cn/admin开放平台 https://open.feishu.cn/ 参数准备 首先&…

JS中的函数与数组

文章目录 函数的定义与调用①、函数定义②、函数调用 函数的参数与返回值let与var关键字区别创建数组并使用数组遍历 函数的定义与调用 ①、函数定义 函数定义有三种方式&#xff1a; 第一种&#xff1a;function 函数名(){ 函数体 } 第二种&#xff1a;定义变量的语法&…

LITE TRANSFORMER WITH LONG-SHORT RANGE ATTENTION

1.摘要 在这篇论文中&#xff0c;我们提出了一种高效的移动NLP架构——Lite Transformer&#xff0c;以在边缘设备上部署移动NLP应用。Transformer已经成为自然语言处理&#xff08;例如机器翻译、问答系统&#xff09;中无处不在的技术&#xff0c;但要实现高性能需要大量计算…

Elasticsearch 初步使用

本文是 Elasticsearch官方博客文档 阅读笔记记录&#xff0c;详细内容请访问官方链接&#xff0c;本文只做重点记录 index索引 对于经常看 Elastic 英文官方文档的开发者来说&#xff0c;我们经常会看到 index 这个词。在英文中&#xff0c;它即可以做动词&#xff0c;表示建…

ASP.Net Core Web API快速搭建后台服务搭载SQLServer+FreeSQL(一)

目录 一.建立WebAPI所需要的环境 1. IDE编辑器&#xff1a;VisualStudio2019 2.数据库安装&#xff1a;SqlServer 3.下载SQL Server Management Studio (SSMS) 二.创建ASP.Net Core Web API工程 1.创建模板工程 2. 试运行案例接口 3.安装FreeSQL工具包 三.设计数据库 启…

《养生大世界》简介及投稿要求

《养生大世界》简介及投稿要求 《养生大世界》是由国家新闻总署备案&#xff0c;中国老年保健协会主管的国家级学术期刊&#xff0c;全国公开发行正规刊物。 《养生大世界》传播健康中国文化理念&#xff0c;推动健康养生科技创新发展&#xff0c;助力健康产业惠及人民。 主…

蓝桥杯单片机竞赛主观题总结(全)(2.5W字)

前言 对于蓝桥杯的单片机竞赛&#xff0c;主观题很重要&#xff0c;占了百分之70-80的大头&#xff0c;因此主观题做得怎么样决定了比赛是否能拿奖&#xff0c;而客观题的正确率很大程度上决定了你能否获得省一&#xff0c;从而进入决赛。因此我在这里分享一期关于主观题中各个…

95道MongoDB面试题

1、mongodb是什么&#xff1f; MongoDB 是由 C语言编写的&#xff0c;是一个基于分布式文件存储的开源数据库系统。 再高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能。 MongoDB 旨在给 WEB 应用提供可扩展的高性能数据存储解决方案。 MongoDB 将数…

前端技术栈 - ES6 - Promise -模块化编程

文章目录 &#x1f55b;ES6⚡let变量⚡const常量⚡数组解构⚡对象解构⚡模板字符串⚡对象声明简写⚡对象方法简写⚡对象运算符扩展⚡箭头函数&#x1f98a;传统函数>箭头函数&#x1f98a;箭头函数对象解构 ⚡作业布置 &#x1f550;Promise⚡需求分析⚡传统ajax回调嵌套⚡p…