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

原理分析
- 从后端获取数据后,判断当前节点是否勾选,从而判断是否勾选子节点
- 勾选当前节点时,子节点均勾选
全勾选与半勾选与不勾选的样式处理全勾选和全取消勾选的逻辑- 筛选出半勾选的节点
定义变量
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地图服务
需求: 加载arcgis没有公开或者私有的地图服务,同时还想实现加载时不弹出登录窗口 提示: 下述是针对独立的arcgis server,没有portal的应用场景; 如果有portal可以参考链接:https://mp.weixin.qq.com/s/W…...
2024年美赛数学建模A题思路分析 - 资源可用性和性别比例
# 1 赛题 问题A:资源可用性和性别比例 虽然一些动物物种存在于通常的雄性或雌性性别之外,但大多数物种实质上是雄性或雌性。虽然许多物种在出生时的性别比例为1:1,但其他物种的性别比例并不均匀。这被称为适应性性别比例的变化。…...
UDP和TCP的区别和联系
传输层:定义传输数据的协议端口号,以及流控和差错校验。 协议有:TCP、UDP等 UDP和TCP的主要区别包括以下几个方面: 1、连接性与无连接性:TCP是面向连接的传输控制协议,而UDP提供无连接的数据报服务。这意…...
delete、truncate和drop区别
一、从执行速度上来说 drop > truncate >> DELETE 二、从原理上讲 1、DELETE DELETE from TABLE_NAME where xxx1.1、DELETE属于数据库DML操作语言,只删除数据不删除表的结构,会走事务,执行时会触发trigger( 触发器…...
946. 验证栈序列
946. 验证栈序列 描述 : 给定 pushed 和 popped 两个序列,每个序列中的 值都不重复,只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时,返回 true;否则,返回 false 。 题目 : LeetCode 94…...
Linux系统管理和Shell脚本笔试题
1、写一个sed命令,修改/tmp/input.txt文件的内容,要求:(1) 删除所有空行;(2) 在非空行前面加一个"AAA",在行尾加一个"BBB",即将内容为11111的一行改为: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温度传感器获取温度
时间记录:2024/1/28 一、DS18B20温度传感器介绍 (1)测温范围-55℃~125℃,在-10℃到85℃范围内误差为0.4 (2)返回的温度数据为16位二进制数据 (3)STM32和DS18B20通信使用单总线协议…...
服务器常遇的响应状态码
服务器常遇的响应状态码 状态码 500 表示服务器内部错误。 这种状态码意味着服务器在尝试执行请求时遇到了意外情况。在处理这种状态码时,我们需要联系服务器管理员或服务提供商以获取更多信息。 处理方法:联系服务器管理员或服务提供商以获取更多信息…...
云原生业务全流程DevOps配置预研与实践
背景 我在一个二线城市(山东济南),相对与北上广深杭这些IT业发达的城市来说,济南IT业对于业内新技术的接受度是有点慢的,国内很多一线大厂早先几年前就开始实践使用的技术,我们这边也是近两年才开始慢慢兴…...
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 文件 注意:根据自己环境进行参数的调整。 [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 前言 现在,几乎所有的系统都支持邮箱登录,如何在邮箱这样的字段上建立合理的索引,是我们今天要讨论的问题。 假设,现在维护一个支持邮箱登录的系统,用户表是这么定义的: 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年春运帷幕的拉开,不少人的返乡之旅也即将开启,从这几日的新闻来看,高速上一路飘红。伴随恶劣天气,加上激增的车流,极易导致高速瘫痪,无法正常使用。为解决此问题,助力高速高效运营&…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统,支持多语言对话(如 中文,英文,日语),语音情感(如 开心,悲伤)&#x…...
