element树形控件(tree)实现父与子关联,子与父不关联;手动设置半选状态

本文主要是介绍element树形控件(tree)实现父与子关联,子与父不关联;手动设置半选状态,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

element树形控件(tree)实现父与子关联,子与父不关联;手动设置半选状态

首先,树组件的代码

<el-treeref="tree" :data="list" node-key="name" show-checkbox :props="defaultProps" highlight-current check-strictly @check="handCheck" @check-change="checkChange" :default-checked-keys="checkedKeys" />

重点用到的方法
在这里插入图片描述

在这里插入图片描述
check-strictly这个字段要设置为true,父子节点才能互不关联。这样我们才能自己来做节点关联与否的操作。

然后是,功能实现的代码

共三层树节点:1、菜单父节点权限;2、菜单权限;3、按钮权限

默认显示的勾选状态

getPermissions(_this.ur, _this.roleName).then((result) => {let _this = this_this.list = result.groups;const tree = [];_this.list.forEach((listItem) => {//因为子节点最内层的子节点比较好操作,省去了一段代码//..............................//子节点添加勾选状态tree.push(listItem);})_this.$nextTick(() => {_this.$refs.tree.setCheckedNodes(_this.pertemp);});// console.log(tree);// 设置父级节点的勾选状态let checkChild = []tree.forEach(item => {// 如果有子级并且只要有一个子级的isGranted为trueif (item.children && item.children.some(ele => ele.isGranted)) {// 就默认设置最外层父节点为勾选状态。筛选isGranted为true的二级节点也设置为勾选状态checkChild.push(item.name, item.children.filter(child => child.isGranted).map(child => { return child.name }))}});_this.$nextTick(() => {_this.checkedKeys = checkChild.flat()setTimeout(() => {// 父级节点tree && tree.length > 0 && setIndeterminate(tree, 'tree')function setIndeterminate (node, treeName) {node.forEach(item => {let treeNode = _this.$refs[treeName].getNode(item);// 如果子节点未全部选中,则设置父节点为半选状态if (treeNode.childNodes.map(ele => ele.checked ).some(ele => !ele)) {treeNode.indeterminate = true}// 如果子节点全部未选中取消父节点的半选中状态if (treeNode.childNodes.every(ele => !ele.checked)) {// treeNode.checked = falsetreeNode.indeterminate = false}// 如果是二级节点,子节点全不选但是当前节点是勾选状态的时候,默认设置变为半选状态if (treeNode.level == 2 && treeNode.checked && treeNode.childNodes.every(ele => !ele.checked)) {treeNode.indeterminate = true}// console.log(treeNode);// 子节点递归item.children && item.children.length > 0 && setIndeterminate(item.children, 'tree')});}}, 500);})}).catch((err) => {console.log(err);});

点击节点时勾选状态的操作

// 覆盖原有勾选功能,父与子关联,子与父不关联handCheck (data, node) {this.hanleCheck(data, node, 'tree')},hanleCheck (data, node, treeName) {// console.log(data, node);const _this = this// 获取当前节点是否被选中const isChecked = _this.$refs[treeName].getNode(data).checked// 如果当前节点被选中,则遍历下级子节点并选中,如果当前节点取消选中,则遍历下级节点并取消if (isChecked) {// 判断该节点是否有下级节点,如果有那么遍历设置下级节点为选中data.children && data.children.length > 0 && setChildreChecked(data.children, true)} else {// 如果节点取消选中,则取消该节点下的子节点选中data.children && data.children.length > 0 && setChildreChecked(data.children, false)}function setChildreChecked (node, isChecked) {node.forEach(item => {item.children && item.children.length > 0 && setChildreChecked(item.children, isChecked)// 修改勾选状态_this.$refs[treeName].setChecked(item.name, isChecked)})}},checkChange (data, checked, indeterminate) {let _this = this;// console.log(data, checked, indeterminate);// 选中全部子节点,父节点也默认选中,但是子节点再次取消勾选或者全部子节点取消勾选也不会影响父节点勾选状态let checkNode = _this.$refs.tree.getNode(data)//获取当前节点// 勾选部分子节点,父节点变为半选状态if (checkNode.parent && checkNode.parent.childNodes.some(ele => ele.checked)) {checkNode.parent.indeterminate = true}// 勾选全部子节点,父节点变为全选状态if (checkNode.parent && checkNode.parent.childNodes.every(ele => ele.checked)) {checkNode.parent.checked = truecheckNode.parent.indeterminate = false}// 如果取消所有第二节点的勾选状态,则第一层父节点也取消勾选if (checkNode.level == 2 && checkNode.parent.childNodes.every(ele => !ele.checked)) {checkNode.parent.checked = falsecheckNode.parent.indeterminate = false}},

这篇关于element树形控件(tree)实现父与子关联,子与父不关联;手动设置半选状态的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

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

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

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

linux hostname设置全过程

《linuxhostname设置全过程》:本文主要介绍linuxhostname设置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录查询hostname设置步骤其它相关点hostid/etc/hostsEDChina编程A工具license破解注意事项总结以RHE

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola