当前位置: 首页 > news >正文

Vue(十九):ElementUI 扩展实现树形结构表格组件的勾父选子、半勾选、过滤出半勾选节点功能

效果

在这里插入图片描述

原理分析

  1. 从后端获取数据后,判断当前节点是否勾选,从而判断是否勾选子节点
  2. 勾选当前节点时,子节点均勾选
  3. 全勾选半勾选不勾选的样式处理
  4. 全勾选全取消勾选的逻辑
  5. 筛选出半勾选的节点

定义变量

import {computed, nextTick, reactive, ref} from 'vue';
import {tree} from "./tree.js";// 默认节点
const tableData = reactive([{id: '节点1', hasChildren: true}, {id: '节点2', hasChildren: true},{id: '节点3', hasChildren: true}, {id: '节点4', hasChildren: true},
]);
const treeTableRef = ref();         // 表格实例
const selections = ref([]);			// 勾选节点
const childrenNodes = reactive({});	// 全部子节点
const isSelectedAll = ref(false);   // 是否勾选全部

定义是否勾选全部子节点函数

/*** 勾选子节点* @param id* @param selected*/
const selectedChildren = (id, selected) => {(childrenNodes[id] || []).forEach(row => {treeTableRef.value.toggleRowSelection(row, selected);if (id !== row.id) selectedChildren(row.id, selected);});
}

单个节点勾选函数

/*** 单个节点勾选* @param selection    选中节点集合* @param row        当前节点*/
const select = (selection, row) => {nextTick(() => {// 是否勾选当前节点下全部子节点selectedChildren(row.id, selection.some(d => d.id === row.id));});
}

从后端获取节点数据

/*** 加载子节点* @param row        当前节点* @param treeNode    节点状态* @param resolve    渲染子集函数*/
const load = (row, treeNode, resolve) => {setTimeout(() => {childrenNodes[row.id] = (tree[row.id] || []).map(d => ({...d, parentId: row.id}));resolve(childrenNodes[row.id]);// 判断当前节点是否选中,选中则自动勾选子节点nextTick(() => select(selections.value, row));}, 100);
}

全勾选、全取消勾选函数和勾选监听

/*** 全选节点勾选* @param selection    选中节点集合*/
const selectAll = (selection) => {isSelectedAll.value = !isSelectedAll.value;treeTableRef.value.data.forEach(row => {// 默认数据的勾选treeTableRef.value.toggleRowSelection(row, isSelectedAll.value);// 是否勾选全部节点下全部子节点selectedChildren(row.id, isSelectedAll.value);});
}/*** 监听节点选择事件* @param selection    选中节点集合*/
const selectionChange = (selection) => {selections.value = selection;// 勾选的节点数量为0时,设置勾选全部的状态为falsenextTick(() => ((selection.length === 0) && (isSelectedAll.value = false)));
}

表头Checkbox选中样式

/*** 表格头选中状态* @type {ComputedRef<string>}    样式选择器名称*/
const headerRowClassName = computed(() => {let count = tableData.length;for (const key in childrenNodes) {count += (childrenNodes[key] || []).length;}return (count === selections.value.length || selections.value.length === 0) ? '' : 'half-checked';
})

定义当前节点样式选择器

/*** 定义表格行样式选择器* @param row            当前节点* @param rowIndex        当前节点索引* @returns {string}    样式选择器名称*/
const rowClassName = ({row, rowIndex}) => {if (selections.value.length === 0) return '';const selectedNodeFlags = []; // 存储节点的状态/*** 筛选子节点勾选状态* @param item    当前节点*/const filterSelectedChildrenNodeFlags = (item) => {(childrenNodes[item.id] || []).forEach(node => {// 避免死循环if (item.id 

相关文章:

Vue(十九):ElementUI 扩展实现树形结构表格组件的勾父选子、半勾选、过滤出半勾选节点功能

效果 原理分析 从后端获取数据后,判断当前节点是否勾选,从而判断是否勾选子节点勾选当前节点时,子节点均勾选全勾选与半勾选与不勾选的样式处理全勾选和全取消勾选的逻辑筛选出半勾选的节点定义变量 import {computed, nextTick, reactive, ref} from vue; import {tree} f…...

SpringBoot RestTemplate 设置挡板

项目结构 代码 BaffleConfig /*** Description 记录配置信息* Author wjx* Date 2024/2/1 14:47**/ public interface BaffleConfig {// 是否开启挡板的开关public static boolean SWITCH true;// 文件根目录public static String ROOT_PATH "D:\\TIS\\mock";// …...

arcgis javascript api4.x加载非公开或者私有的arcgis地图服务

需求&#xff1a; 加载arcgis没有公开或者私有的地图服务&#xff0c;同时还想实现加载时不弹出登录窗口 提示&#xff1a;​ 下述是针对独立的arcgis server&#xff0c;没有portal的应用场景&#xff1b; 如果有portal可以参考链接&#xff1a;https://mp.weixin.qq.com/s/W…...

2024年美赛数学建模A题思路分析 - 资源可用性和性别比例

# 1 赛题 问题A&#xff1a;资源可用性和性别比例 虽然一些动物物种存在于通常的雄性或雌性性别之外&#xff0c;但大多数物种实质上是雄性或雌性。虽然许多物种在出生时的性别比例为1&#xff1a;1&#xff0c;但其他物种的性别比例并不均匀。这被称为适应性性别比例的变化。…...

UDP和TCP的区别和联系

传输层&#xff1a;定义传输数据的协议端口号&#xff0c;以及流控和差错校验。 协议有&#xff1a;TCP、UDP等 UDP和TCP的主要区别包括以下几个方面&#xff1a; 1、连接性与无连接性&#xff1a;TCP是面向连接的传输控制协议&#xff0c;而UDP提供无连接的数据报服务。这意…...

delete、truncate和drop区别

一、从执行速度上来说 drop > truncate >> DELETE 二、从原理上讲 1、DELETE DELETE from TABLE_NAME where xxx1.1、DELETE属于数据库DML操作语言&#xff0c;只删除数据不删除表的结构&#xff0c;会走事务&#xff0c;执行时会触发trigger&#xff08; 触发器…...

946. 验证栈序列

946. 验证栈序列 描述 : 给定 pushed 和 popped 两个序列&#xff0c;每个序列中的 值都不重复&#xff0c;只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时&#xff0c;返回 true&#xff1b;否则&#xff0c;返回 false 。 题目 : LeetCode 94…...

Linux系统管理和Shell脚本笔试题

1、写一个sed命令&#xff0c;修改/tmp/input.txt文件的内容&#xff0c;要求&#xff1a;(1) 删除所有空行&#xff1b;(2) 在非空行前面加一个"AAA"&#xff0c;在行尾加一个"BBB"&#xff0c;即将内容为11111的一行改为&#xff1a;AAA11111BBB #写入内…...

docker 搭建 Seafile 集成 onlyoffice

docker-compose一键部署yaml文件 version: "3"services:db:image: mariadb:10.11container_name: seafile-mysqlenvironment:- MYSQL_ROOT_PASSWORDdb_dev # Requested, set the roots password of MySQL service.- MYSQL_LOG_CONSOLEtruevolumes:- /share/ZFS18_D…...

【Spring Boot 3】【JPA】嵌入式对象

【Spring Boot 3】【JPA】嵌入式对象 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是要花费或…...

STM32控制DS18B20温度传感器获取温度

时间记录&#xff1a;2024/1/28 一、DS18B20温度传感器介绍 &#xff08;1&#xff09;测温范围-55℃~125℃&#xff0c;在-10℃到85℃范围内误差为0.4 &#xff08;2&#xff09;返回的温度数据为16位二进制数据 &#xff08;3&#xff09;STM32和DS18B20通信使用单总线协议…...

服务器常遇的响应状态码

服务器常遇的响应状态码 状态码 500 表示服务器内部错误。 这种状态码意味着服务器在尝试执行请求时遇到了意外情况。在处理这种状态码时&#xff0c;我们需要联系服务器管理员或服务提供商以获取更多信息。 处理方法&#xff1a;联系服务器管理员或服务提供商以获取更多信息…...

云原生业务全流程DevOps配置预研与实践

背景 我在一个二线城市&#xff08;山东济南&#xff09;&#xff0c;相对与北上广深杭这些IT业发达的城市来说&#xff0c;济南IT业对于业内新技术的接受度是有点慢的&#xff0c;国内很多一线大厂早先几年前就开始实践使用的技术&#xff0c;我们这边也是近两年才开始慢慢兴…...

SouthLeetCode-打卡24年01月第5周

SouthLeetCode-打卡24年01月第5周 // Date : 2024/01/39 ~ 2024/01/31 031.删除链表的倒数第 N 个结点 (1) 题目描述 031#LeetCode.19.#北岸计划2024/01/29 (2) 题解代码 Version1.0 class Solution {public ListNode removeNthFromEnd(ListNode head, int n) {if(head …...

【国产MCU】-CH32V307-通用DMA控制器及使用

通用DMA控制器及使用 文章目录 通用DMA控制器及使用1、通用DMA控制器介绍2、DMA驱动API介绍3、DMA使用实例直接存储器访问控制器(DMA)提供在外设和存储器之间或存储器和存储器之间的高速数据传输方式,无须CPU 干预,数据可以通过DMA 快速地移动,以节省CPU 的资源来做其他操…...

mysql8.0-cnf文件

一、my.cnf 文件 注意&#xff1a;根据自己环境进行参数的调整。 [client] port 3307 socket /data/mysql8.0.35/3307/tmp/mysql.sock[mysqldump] quick max_allowed_packet 64M[mysql] prompt"\u\h: \R:\m:\s [\d]> " no-auto-rehash[mysqld] ###### BASIC…...

MySQL进阶45讲【11】怎么更好地给字符串字段加索引?

1 前言 现在&#xff0c;几乎所有的系统都支持邮箱登录&#xff0c;如何在邮箱这样的字段上建立合理的索引&#xff0c;是我们今天要讨论的问题。 假设&#xff0c;现在维护一个支持邮箱登录的系统&#xff0c;用户表是这么定义的&#xff1a; mysql> create table SUser…...

​(三)hadoop之hive的搭建1

下载 访问官方网站https://hive.apache.org/ 点击downloads 点击Download a release now! 点击https://dlcdn.apache.org/hive/ 选择最新的稳定版 复制最新的url 在linux执行下载命令 wget https://dlcdn.apache.org/hive/hive-3.1.3/apache-hive-3.1.3-bin.tar.gz 2.解压…...

Spring事务传播机制

Spring事务传播机制 回顾简单介绍事务的传播机制有哪些Propagation.REQUIREDPropagation.SUPPORTSPropagation.MANDATORYPropagation.REQUIRES_NEWPropagation.NOT_SUPPORTEDPropagation.NEVERPropagation.NESTED 实例REQUIREDREQUIRES_NEWNEVERNESTEDREQUIRED和NESTED的区别 回…...

智能分析网关V4+EasyCVR视频融合平台——高速公路交通情况的实时监控和分析一体化方案

随着2024年春运帷幕的拉开&#xff0c;不少人的返乡之旅也即将开启&#xff0c;从这几日的新闻来看&#xff0c;高速上一路飘红。伴随恶劣天气&#xff0c;加上激增的车流&#xff0c;极易导致高速瘫痪&#xff0c;无法正常使用。为解决此问题&#xff0c;助力高速高效运营&…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...