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

本文主要是介绍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

这篇关于element中Tree 树形控件实现多选、展开折叠、全选全不选、父子联动、默认展开、默认选中、默认禁用、自定义节点内容、可拖拽节点、手风琴模式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/576232

相关文章

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

Java设计模式---迭代器模式(Iterator)解读

《Java设计模式---迭代器模式(Iterator)解读》:本文主要介绍Java设计模式---迭代器模式(Iterator),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录1、迭代器(Iterator)1.1、结构1.2、常用方法1.3、本质1、解耦集合与遍历逻辑2、统一

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

C++链表的虚拟头节点实现细节及注意事项

《C++链表的虚拟头节点实现细节及注意事项》虚拟头节点是链表操作中极为实用的设计技巧,它通过在链表真实头部前添加一个特殊节点,有效简化边界条件处理,:本文主要介绍C++链表的虚拟头节点实现细节及注... 目录C++链表虚拟头节点(Dummy Head)一、虚拟头节点的本质与核心作用1. 定义2. 核心价值二

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja

nginx启动命令和默认配置文件的使用

《nginx启动命令和默认配置文件的使用》:本文主要介绍nginx启动命令和默认配置文件的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录常见命令nginx.conf配置文件location匹配规则图片服务器总结常见命令# 默认配置文件启动./nginx

PostgreSQL 默认隔离级别的设置

《PostgreSQL默认隔离级别的设置》PostgreSQL的默认事务隔离级别是读已提交,这是其事务处理系统的基础行为模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一 默认隔离级别概述1.1 默认设置1.2 各版本一致性二 读已提交的特性2.1 行为特征2.2

Redis Cluster模式配置

《RedisCluster模式配置》:本文主要介绍RedisCluster模式配置,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录分片 一、分片的本质与核心价值二、分片实现方案对比 ‌三、分片算法详解1. ‌范围分片(顺序分片)‌2. ‌哈希分片3. ‌虚