vue实现el-tree操作后默认展开该节点和同级节点拖拽并进行前后端排序

news/2024/4/25 11:49:19

问题一:实现el-tree 删除、添加、编辑后默认展开该节点

操作视频如下

el-tree节点操作后仍展开

节点代码

<template><el-treev-loading="loading"ref="tree"element-loading-text="加载中"highlight-current:data="treeData":props="defaultProps"node-key="id":default-expanded-keys="defaultKey"@node-click="handleNodeClick"/>
</template>

实现步骤:

  1. 通过el-tree的node-click事件获取点击节点的数据
  2. 通过递归获取点击节点的所有父级的id
  3. 通过node-keydefault-expanded-keys属性绑定获取的父级id和自身id

逻辑代码如下

	data() {return {treeData:[], // el-tree数据defaultKey:[], // 默认展开的数据defaultProps: {children: 'child',label: 'name',},}},methods: {/*** @func 获取当前点击节点数据,根据当前数据查询该数据的所有父级id* @params {Object} data* @return void*/async handleNodeClick(data) {// 使用递归——编辑、删除、添加完成之后该节点仍是展开状态let dataArr = this.findParentIds(this.treeData, data.id);this.defaultKey = dataArr;},/*** 根据树子节点ID查找所有父节点ID* @param {array} dataSource 树形结构数据源* @param {number} nodeId 子节点ID* @returns {array} 包含所有父节点ID的数组,按照从根节点到直接父节点的顺序排序*/findParentIds(dataSource, nodeId) {const parentIds = []; // 用于存储所有父节点ID的数组// 定义一个递归函数,用于遍历整棵树并查找子节点的所有父节点function traverse(node, nodeId) {if (node.id === nodeId) {// 如果当前节点的ID等于子节点的ID,则表示已经找到了子节点,可以开始向上查找父节点return true; // 返回true表示已经找到了子节点}if (node.child) {// 如果当前节点有子节点,则继续遍历子节点for (const childNode of node.child) {if (traverse(childNode, nodeId)) {// 如果在子节点中找到了子节点的父节点,则将当前节点的ID添加到父节点ID数组中,并返回true表示已经找到了子节点parentIds.push(node.id);return true;}}}return false; // 如果当前节点不是子节点的父节点,则返回false}// 从根节点开始遍历整棵树,并调用递归函数查找子节点的所有父节点for (const node of dataSource) {if (traverse(node, nodeId)) {// 如果在当前节点的子树中找到了子节点的父节点,则直接退出循环break;}}return parentIds.length ? [...parentIds, nodeId] : [nodeId]; // 返回所有父节点ID和自身id},}

问题二:el-tree 同级节点拖拽并进行前后端排序+筛选

操作视频如下

el-tree 同级拖拽排序

节点代码

<template><el-treev-loading="loading"ref="tree"element-loading-text="加载中"highlight-current:data="treeData":props="defaultProps":draggable="true":allow-drop="allowDrop":filter-node-method="filterNode"@node-drop="handleDrop"/>
</template>

实现步骤:

  1. 通过el-tree的draggable属性开启可拖拽功能
  2. 通过el-tree的allow-drop属性写方法判断节点能否被拖拽
  3. 通过el-tree的node-drop属性获取拖拽成功节点的子级id
  4. 将获取拖拽节点的子集id传给后端
  5. 外加筛选是用到了filter-node-method属性

逻辑代码如下

		/*** @func  判断拖拽的数据是否是同一层级*/allowDrop(draggingNode, dropNode, type) {if (draggingNode.level === dropNode.level) {if (draggingNode.data.pid === dropNode.data.pid) {return type === 'prev' || type === 'next';}} else {return false;}},/*** @func  拖拽成功事件*/handleDrop(draggingNode, dropNode) {let list = [];// 获取子级idfor (let item of dropNode.parent.childNodes) {list.push(item.data.id);}// 将该节点排序后的子级id传给后端this.funGetDragSort(list);},/*** @func  调后端接口——子级id传给后端*/async funGetDragSort(val) {await datamanagement.updateCategorySort(val);},/*** @func  左侧el-tree控件搜索* @return void*/filterNode(value, data) {if (!value) return true;return data.name.indexOf(value) !== -1;},

https://www.xjx100.cn/news/3118956.html

相关文章

用户在页面离开时发送http请求,如何成功

项目场景&#xff1a; 用户在离开页面时&#xff0c;发送http请求给后端&#xff0c;用来收集用户日志数据进行业务分析 问题描述 在浏览器内多页面发生跳转时&#xff0c;无法保证当前页面进程内的请求能够顺利完成&#xff0c;大多数情况下会被浏览器cancled, 请求不能到达…

Golang中WebSocket和WSS的支持

引言 WebSocket是一种在单个TCP连接上进行全双工通信的协议&#xff0c;它为实时通信提供了一种简单而强大的方式。而WSS&#xff08;WebSocket Secure&#xff09;是一种通过加密的方式使用WebSocket的协议&#xff0c;可以在安全的传输层上进行通信。本文将探讨Golang中WebS…

设计模式-创建型模式之单例设计模式

文章目录 一、设计模式二、设计模式的六大原则三、设计模式分类四、单例设计模式 一、设计模式 设计模式&#xff08;Design pattern&#xff09;代表了最佳的实践&#xff0c;通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般…

使用STM32微控制器实现烟雾传感器的接口和数据处理

烟雾传感器是常见的安全检测装置&#xff0c;通过检测空气中的烟雾浓度来提醒用户有潜在的火灾风险。本文将介绍如何使用STM32微控制器来实现烟雾传感器的接口和数据处理。包括硬件连接、采集模拟信号、数字信号处理和报警策略等方面。同时&#xff0c;给出相应的代码示例。 一…

Web安全漏洞分析-XSS(上)

随着互联网的迅猛发展&#xff0c;Web应用的普及程度也愈发广泛。然而&#xff0c;随之而来的是各种安全威胁的不断涌现&#xff0c;其中最为常见而危险的之一就是跨站脚本攻击&#xff08;Cross-Site Scripting&#xff0c;简称XSS&#xff09;。XSS攻击一直以来都是Web安全领…

人工智能对现代生活的影响

人工智能对现代生活的影响 本文旨在探讨人工智能&#xff08;AI&#xff09;对现代生活的巨大影响。通过分析AI在各个领域的应用&#xff0c;包括智能手机、智能家居和预测未来等方面&#xff0c;我们可以看到AI如何成为我们生活中的得力助手&#xff0c;提供便捷和智能的解决方…

深度学习框架:Pytorch与Keras的区别与使用方法

☁️主页 Nowl &#x1f525;专栏《机器学习实战》 《机器学习》 &#x1f4d1;君子坐而论道&#xff0c;少年起而行之 文章目录 Pytorch与Keras介绍 Pytorch 模型定义 模型编译 模型训练 输入格式 完整代码 Keras 模型定义 模型编译 模型训练 输入格式 完整代…

eNSP实验

前言 本文记录了使用eNSP进行组网&#xff0c;学习、巩固一些之前学的网络基础知识和协议。 一&#xff1a;同网段、网关互通 网络拓扑如下&#xff1a; AR1的配置&#xff1a; interface G0/0/0 ip address 192.168.10.1 24 PC1和PC2的配置(IP地址和网关设置) 最终实现PC1…