element中Tree 树形控件实现多选、展开折叠、全选全不选、父子联动、默认展开、默认选中、默认禁用、自定义节点内容、可拖拽节点、手风琴模式

目录

  • 1.代码实现
  • 2. 效果图
  • 3. 使用到的部分属性说明
  • 4. 更多属性配置查看element官网

1.代码实现

 <template><div class="TreePage"><el-checkboxv-model="menuExpand"@change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox><el-checkboxv-model="menuNodeAll"@change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox><el-checkboxv-model="menuCheckStrictly"@change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox><el-row :gutter="20" style="margin-top: 20px"><!--村数据--><el-col :span="24"><div class="head-container"><el-inputv-model="deptName"placeholder="请输入名称"clearablesize="small"prefix-icon="el-icon-search"style="margin-bottom: 20px"/></div><!-- 组织树 --><div class="head-container"><el-treeref="menu":props="defaultProps":default-expanded-keys="defaultExpandedKeys":default-checked-keys="defaultCheckedKeys":expand-on-click-node="false":data="menuOptions"show-checkboxnode-key="deptId":check-strictly="!menuCheckStrictly"empty-text="加载中,请稍后":filter-node-method="filterNode"@node-click="handleNodeClick"draggable@node-drag-start="handleDragStart"@node-drag-enter="handleDragEnter"@node-drag-leave="handleDragLeave"@node-drag-over="handleDragOver"@node-drag-end="handleDragEnd"@node-drop="handleDrop":allow-drop="allowDrop":allow-drag="allowDrag"><!--自定义节点内容: 使用 scoped slot 会传入两个参数node和data,分别表示当前节点的 Node 对象和当前节点的数据。 --><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-button type="text" size="mini" @click="() => append(data)">新增</el-button><el-buttontype="text"size="mini"@click="() => remove(node, data)">删除</el-button></span></span></el-tree></div></el-col></el-row><el-button type="primary" @click="submitForm">确 定</el-button></div>
</template><script>
let deptId = 10000;
export default {name: "TreePage2",props: {},data() {return {menuExpand: false,menuNodeAll: false,menuCheckStrictly: true,// 模拟数据menuOptions: [{deptId: 100,parentId: 0,parentName: null,ancestors: "0",deptName: "XX01街道",children: [{deptId: 1001,parentId: 100,parentName: null,ancestors: "0,100",deptName: "XX1-1村",children: [{deptId: 10011,parentId: 1001,parentName: null,ancestors: "0,100,1001",deptName: "XX1-1-1村",children: [],},],},{deptId: 1002,parentId: 100,parentName: null,ancestors: "0,100",deptName: "XX1-2村",children: [{deptId: 10021,parentId: 1002,parentName: null,ancestors: "0,100,1002",deptName: "XX1-2-1村",children: [],disabled: true, //禁用},],},{deptId: 1003,parentId: 100,parentName: null,ancestors: "0,100",deptName: "XX1-3村",children: [],},],},{deptId: 200,parentId: 0,parentName: null,ancestors: "0",deptName: "XX02街道",children: [{deptId: 2001,parentId: 200,parentName: null,ancestors: "0,200",deptName: "XX2-1村",children: [],},{deptId: 2002,parentId: 200,parentName: null,ancestors: "0,200",deptName: "XX2-2村",children: [],},{deptId: 2003,parentId: 200,parentName: null,ancestors: "0,200",deptName: "XX2-3村",children: [],},],},],// 村名称deptName: undefined,defaultProps: {children: "children",label: "deptName",},// 默认展开的节点的 key 的数组defaultExpandedKeys: [100, 10021],// 默认展开的节点的 选中 的数组defaultCheckedKeys: [1001],};},watch: {// 在需要对节点进行过滤时,调用 Tree 实例的filter方法,参数为关键字。// 需要注意的是,此时需要设置filter-node-method,值为过滤函数。// 根据名称筛选村社树deptName(val) {this.$refs.menu.filter(val);},},methods: {// 树权限(展开/折叠)handleCheckedTreeExpand(value) {let treeList = this.menuOptions;for (let i = 0; i < treeList.length; i++) {this.$refs.menu.store.nodesMap[treeList[i].deptId].expanded = value;}},// 树权限(全选/全不选)handleCheckedTreeNodeAll(value) {this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);},// 树权限(父子联动)handleCheckedTreeConnect(value) {this.menuCheckStrictly = value ? true : false;},// 过滤函数filterNode(value, data) {// console.log(value, data)if (!value) return true;return data.deptName.indexOf(value) !== -1;},// 左侧网格树-节点单击事件handleNodeClick(data) {console.log(data, "左侧网格树-节点单击事件");},// 所有菜单节点数据getMenuAllCheckedKeys() {// 目前被选中的菜单节点let checkedKeys = this.$refs.menu.getCheckedKeys();// 半选中的菜单节点let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);return checkedKeys;},// 新增节点append(data) {const newChild = { deptId: deptId++, deptName: "test", children: [] };if (!data.children) {this.$set(data, "children", []);}data.children.push(newChild);},// 删除节点remove(node, data) {const parent = node.parent;const children = parent.data.children || parent.data;const index = children.findIndex((d) => d.deptId === data.deptId);children.splice(index, 1);},// 节点开始拖拽时触发的事件handleDragStart(node, ev) {console.log("drag start", node,ev);},//   拖拽进入其他节点时触发的事件handleDragEnter(draggingNode, dropNode, ev) {console.log("tree drag enter: ", dropNode.deptName,ev);},//   拖拽离开某个节点时触发的事件handleDragLeave(draggingNode, dropNode, ev) {console.log("tree drag leave: ", dropNode.deptName,ev);},//   在拖拽节点时触发的事件(类似浏览器的 mouseover 事件)handleDragOver(draggingNode, dropNode, ev) {console.log("tree drag over: ", dropNode.deptName,ev);},//   拖拽结束时(可能未成功)触发的事件handleDragEnd(draggingNode, dropNode, dropType, ev) {console.log("tree drag end: ", dropNode && dropNode.deptName, dropType,ev);},//   拖拽成功完成时触发的事件handleDrop(draggingNode, dropNode, dropType, ev) {console.log("tree drop: ", dropNode.deptName, dropType,ev);},//   拖拽时判定目标节点能否被放置。type 参数有三种情况:'prev'、'inner' 和 'next',// 分别表示放置在目标节点前、插入至目标节点和放置在目标节点后allowDrop(draggingNode, dropNode, type) {if (dropNode.data.deptName === "XX1-1-1村") {return type !== "inner";} else {return true;}},//   判断节点能否被拖拽allowDrag(draggingNode) {return draggingNode.data.deptName.indexOf("XX1-2-1村") === -1;},/** 提交按钮 */submitForm() {let menuIds = this.getMenuAllCheckedKeys();console.log(menuIds, "menuIds");},},
};
</script><style scoped>
.custom-tree-node {flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;
}
</style>

2. 效果图

在这里插入图片描述

3. 使用到的部分属性说明

  1. default-expanded-keys: 默认展开的节点的 key 的数组;
  2. expand-on-click-node: 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点;
  3. node-key :每个树节点用来作为唯一标识的属性,整棵树应该是唯一的;
  4. filter-node-method: 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏;
  5. node-click :节点被点击时的回调;
  6. accordion: 是否每次只打开一个同级树节点展开;
  7. default-expand-all: 是否默认展开所有节点 ;
  8. 通过 draggable: 属性可让节点变为可拖拽;

4. 更多属性配置查看element官网

https://element.eleme.cn/#/zh-CN/component/tree

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

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

相关文章

java 使用 jtransforms 傅里叶库通过时域转频域实现wav 音频的加速与变慢效果

引入 maven 依赖&#xff1a;<dependency><groupId>net.sourceforge.jtransforms</groupId><artifactId>jtransforms</artifactId><version>2.4.0</version></dependency> FourierTransformTest.java&#xff1a; import edu.…

一、Vue3基础[常用的循环]

一、循环 1. filter 解释&#xff1a;filter 方法会创建一个新的数组&#xff0c;其中包含满足指定条件的所有元素。这个方法非常适合循环遍历数组并根据特定条件过滤元素的情况。例如&#xff0c;可以使用 filter 方法来找出数组中所有大于特定值的元素&#xff0c;或者找出…

华为bgp之多级RR及团体属性、正则表达式多种应用案例

1、实现总部和分部的oa、财务网段互通 2、分部之间oa也能互通 3、分部之间不能互通财务 主要用到bgp自定义团体属性、一级二级RR配置、bgp正则表达式匹配规则 R1 router id 1.1.1.1 //配全局地址池&#xff0c;又可以给ospf用也可以给bgp用 interface GigabitEthernet0/0/0 …

延迟加载:提升性能的隐形利器

引言 想象一下&#xff0c;你正在玩一款大型电子游戏。如果游戏在启动的时候就加载了所有的关卡、角色和道具&#xff0c;那玩家可能需要等待很长时间才能开始游戏&#xff0c;而且大部分内容可能在游戏的初期都不会被用到。显然&#xff0c;这样的做法既低效又耗时。 而延迟加…

位移贴图还原电影3D角色

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 位移贴图&#xff08;Displacement Map&#xff09;在电影制作中是一…

OpenCV图像处理——C++实现亚像素尺寸标定板边缘轮廓提取

前言 标定模板&#xff08;Calibration Target&#xff09;在机器视觉、图像测量、摄影测量以及三维重建等应用中起着重要的作用。它被用于校正相机的畸变&#xff0c;确定物理尺寸和像素之间的换算关系&#xff0c;并建立相机成像的几何模型。通过使用相机拍摄带有固定间距图…

进程和计划任务-------后续(二)

一、进程管理 1.进程启动---------- 前台启动与后台启动 进程需要手动启动 前台启动&#xff08;运行&#xff09;&#xff1a;通过终端启动&#xff0c;且启动后一直占据终端&#xff08;影响当先终端的操作&#xff09; 后台启动&#xff1a;可通过终端启动&#xff0c;但启…

Unity添加所有场景到BuildSettings

Unity添加所有场景到BuildSettings using UnityEngine; using UnityEditor; using System.Collections.Generic; using System.IO; public class Tools : Editor {[MenuItem("Tools/添加所有场景到BuildSettings")]static void CheckSceneSetting(){List<string&…

java基于ssm的线上选课系统的设计与实现论文

摘 要 在如今社会上&#xff0c;关于信息上面的处理&#xff0c;没有任何一个企业或者个人会忽视&#xff0c;如何让信息急速传递&#xff0c;并且归档储存查询&#xff0c;采用之前的纸张记录模式已经不符合当前使用要求了。所以&#xff0c;对学生选课信息管理的提升&#x…

【AI视野·今日Robot 机器人论文速览 第六十八期】Tue, 2 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Tue, 2 Jan 2024 Totally 12 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers Edge Computing based Human-Robot Cognitive Fusion: A Medical Case Study in the Autism Spectrum Disorder Therapy Author…

【华为OD真题 Python】查找一个有向网络的头节点和尾节点

文章目录 题目描述输入输出示例1输入输出示例2输入输出备注实现代码题目描述 给定一个有向图,图中可能包含有环,图使用二维矩阵表示,每一行的第一列表示起始节点,第二列表示终止节点,如[0, 1]表示从0到1的路径。每个节点用正整数表示。求这个数据的首节点与尾节点,题目给…

java基于ssm框架的博客系统的开发论文

目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 vue技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…

Mendix 创客访谈录|太迅的闪电侠如何发动闪电战

本期创客 房杰 上海太迅自动识别技术有限公司 移动开发经理 大家好&#xff0c;我叫房杰&#xff0c;软件工程专业毕业&#xff0c;目前任职于上海太迅自动识别技术有限公司&#xff0c;任职的部门是软件事业部&#xff0c;担任移动开发经理。 上海太迅是一家专注于自动识…

安装Keras用于影像分割

conda create -n tfkeras2024 python3.9.18 activate tfkeras2024 pip install tensorflow-gpu2.9.0 pip install keras pip install scipy pip install ipykernel ipython python -m ipykernel install --name tfkeras2024 删除环境conda remove -n tfkeras2024 --all

谈一谈报考高校异地研究院的利弊

这篇文章是抖音和b站上上传的同名视频的原文稿件&#xff0c;感兴趣的csdn用户可以关注我的抖音和b站账号&#xff08;GeekPower极客力量&#xff09;。同时这篇文章也为视频观众提供方便&#xff0c;可以更加冷静地分析和思考。文章同时在知乎发表。 前年国家出台文件&#x…

Jenkins修改全局maven配置后不生效解决办法、以及任务读取不同的settings.xml文件配置

一、修改Global Tool Configuration的maven配置不生效 说明&#xff1a;搭建好jenkins后&#xff0c;修改了全局的settings.xml&#xff0c;导致读取settings一直是之前配置的。 解决办法一 Jenkins在创建工作任务时&#xff0c;会读取当前配置文件内容&#xff0c;固定在这…

目标检测:深度学习引领视觉智能的未来

目标检测&#xff1a;深度学习引领视觉智能的未来 目标检测是计算机视觉领域中的一项重要任务&#xff0c;旨在从图像或视频中确定和定位特定物体的存在。这一领域的发展在很大程度上得益于深度学习技术的崛起&#xff0c;为机器在理解和处理视觉信息上带来了质的飞跃。本文将…

Scrum的工件

我们采用了Scrum进行开发方面的管理&#xff0c;那么所有的计划和工作都应该是透明的&#xff0c;这给了我们检查这些东西的机会&#xff0c;以便能够即时做出调整来适应即将发生的变化。 那么Scrum为我们设计了一些工件帮助我们检查我们的工作和计划&#xff0c;每个工件都有…

【学习笔记】[AGC060D] Same Descent Set

本来是想做点多项式调节一下&#xff0c;结果发现这玩意太肝了&#xff0c;似乎并没有起到调节作用。 设 f ( S ) f(S) f(S)表示符号为 < < <的下标集合恰好为 S S S的方案数&#xff0c;因为两个序列完全等同&#xff0c;因此答案等于 ∑ S ⊆ { 1 , 2 , . . . , n …

如何在SpringBoot中优雅地重试调用第三方API?

1.引言 在实际的应用中,我们经常需要调用第三方API来获取数据或执行某些操作。然而,由于网络不稳定、第三方服务异常等原因,API调用可能会失败。为了提高系统的稳定性和可靠性,我们通常会考虑实现重试机制。 2.重试机制的必要性 第三方API调用可能面临各种不可预测的问题…