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.rhkb.cn/news/231735.html

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

相关文章

如何保障集团下达的政策要求有效落地

随着新一轮国企改革的推进&#xff0c;很多国有企业建立了集团化的管控体系。通过集团化经营管理的模式&#xff0c;帮助国有企业凝聚更强的竞争力&#xff0c;集团企业通过资源整合、反向投资、控股、参股等手法创造业务板块之间的协同、互补效应&#xff0c;从而实现战略联动…

gitlab 配置 二

一 环境说明 群晖Nas DS418DELL XPS serverGitlab ce 二 需要实现的功能 外网可以访问&#xff0c;gitlab使用https的方式访问。wiki issue 等都可以上传图片和附件。 三 操作步骤 因为群晖上有证书&#xff0c;并且由群晖做转发功能。因此证书上&#xff0c;采用群晖的证书…

Sqlmap参数设置

Sqlmap参数设置 &#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388; --------------------------------------------注意---------…

RBAC基于角色的访问控制

一 什么是RBAC 概念 RBAC 是基于角色的访问控制&#xff08;Role-Based Access Control &#xff09;在 RBAC 中&#xff0c;权限与角色相关联&#xff0c;用户通过成为适当角色的成员而得到这些角色的权限。这就极大地简化了权限的管理。这样管理都是层级相互依赖的&#…

【论文阅读笔记】医学多模态新数据集-Large-scale Long-tailed Disease Diagnosis on Radiology Images

这是复旦大学2023.12.28开放出来的数据集和论文&#xff0c;感觉很宝藏&#xff0c;稍微将阅读过程记录一下。 Zheng Q, Zhao W, Wu C, et al. Large-scale Long-tailed Disease Diagnosis on Radiology Images[J]. arXiv preprint arXiv:2312.16151, 2023. 项目主页&#xf…

智慧校园的“边缘智能“: 打造未来教育的桥梁

在科技飞速发展的时代&#xff0c;智能已经渗透到我们生活的各个角落。而当智能遇上教育&#xff0c;会激发出怎样的火花呢&#xff1f;今天&#xff0c;我们就来聊聊这个热门话题——智慧校园和边缘智能网关的结合&#xff0c;它们是如何共同塑造未来教育的新形态。 什么是边…

Dubbo入门介绍和实战

1. 引言 Dubbo是一款开源的高性能、轻量级的Java RPC&#xff08;远程过程调用&#xff09;框架&#xff0c;旨在解决分布式服务之间的通信问题。本文将介绍Dubbo的基础概念、核心特性以及使用场景&#xff0c;包括实际示例演示。 2. 什么是Dubbo&#xff1f; Dubbo是阿里巴…

FinGPT——金融领域开源大模型

文章目录 背景论文摘要相关工作大型语言模型&#xff08;LLMs&#xff09;和ChatGPT金融领域的LLMs为什么需要开源的金融LLMs&#xff1f; 以数据为中心的方法用于FinLLMs金融数据和独特特性应对处理金融数据的挑战 FINGPT 概述&#xff1a;FINLLM 的开源框架数据来源面向金融N…

计算机毕业设计 基于SpringBoot的公司资产网站的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

普通BUG

IDEA包折叠 如果自动紧凑包名,则有些时候创建新包或类的时候不能达到想要的摆放层级关系,此时右上角搜索按钮搜hide middle,关掉紧凑即可,然后既可以每层一个包不折叠. 效果: 20240105println输出多个参数 int a 10;int b 20;报错println是可以输出多个参数的,但不支持直接用…

网络调试 UDP1,开发板用静态地址-入门6

https://www.bilibili.com/video/BV1zx411d7eC?p11&vd_source109fb20ee1f39e5212cd7a443a0286c5 1, 开发板连接路由器 1.1&#xff0c;烧录无OS UDP例程 1.2&#xff0c;Mini USB连接电脑 1.3&#xff0c;开发板LAN接口连接路由器 2. Ping开发板与电脑之间通信* 2.1 根据…

Python入门-函数

1.函数的定义及调用 函数&#xff1a;函数是将一段实现功能的完整代码&#xff0c;使用函数名称进行封装&#xff0c;通过函数名称进行调用。 以此达到一次编写&#xff0c;多次调用的目的 def get_sum(num): #num叫形式参数s0for i in range(1,num1):siprint(f1到{num}之…

MySQL数据库的CURD、常见函数及UNION和UNION ALL

一、概述 MySQL是一种流行的关系型数据库管理系统&#xff0c;广泛应用于各种应用场景。在MySQL中&#xff0c;CURD操作是指创建&#xff08;Create&#xff09;、读取&#xff08;Read&#xff09;、更新&#xff08;Update&#xff09;和删除&#xff08;Delete&#xff09;…

Open3D聚类算法

按照官网的例子使用聚类&#xff0c;发现结果是全黑的。 经过多次测试发现 eps3.3, min_points1这里是关键 min_points必须等于1否则无效果 import time import open3d as o3d; import numpy as np; import matplotlib.pyplot as plt#坐标 mesh_coord_frame o3d.geometry.Tria…

go slice源码探索(切片、copy、扩容)和go编译源码分析

文章目录 概要一、数据结构二、初始化2.1、字面量2.2、下标截取2.2.1、截取原理 2.3、make关键字2.3.1、编译时 三、复制3.1、copy源码 四、扩容4.1、append源码 五&#xff1a;切片的GC六&#xff1a;切片使用注意事项七&#xff1a;参考 概要 Go语言的切片&#xff08;slice…

网络摄像机的网络连接

网络摄像机的网络连接 1. 网络连接2. 网络直通线和网络交叉线的制作方法References 1. 网络连接 网络摄像机完成安装后&#xff0c;需要进行功能的配置及参数的设置&#xff0c;您可以通过浏览器进行相关功能的配置。 有线网络连接 左侧为通过网络直通线连接的示意图&#x…

Spring Boot 整合 Knife4j(快速上手)

关于 Knife4j 官方文档&#xff1a;https://doc.xiaominfo.com/ Knife4j是一个基于Swagger的API文档生成工具&#xff0c;它提供了一种方便的方式来为Spring Boot项目生成在线API文档。Knife4j的特点包括&#xff1a; 自动化生成&#xff1a;通过Swagger注解&#xff0c;Kn…

canvas设置图形的阴影

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

.NET 8.0 本机 AOT

在软件开发领域&#xff0c;优化性能和简化效率仍然至关重要。.NET 平台二十年来不断创新&#xff0c;为开发人员提供了构建弹性且高效的软件解决方案的基础架构。 与本机 AOT&#xff08;提前&#xff09;编译相结合&#xff0c;取得了显着的进步。本文深入研究.NET Native AO…

paddlehub 文本检测使用

PaddleHub负责模型的管理、获取和预训练模型的使用。 参考&#xff1a;https://github.com/PaddlePaddle/PaddleHub/tree/develop/modules/image/text_recognition/chinese_text_detection_db_server import paddlehub as hub import cv2 # from utils import cv_show import…