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年春运帷幕的拉开,不少人的返乡之旅也即将开启,从这几日的新闻来看,高速上一路飘红。伴随恶劣天气,加上激增的车流,极易导致高速瘫痪,无法正常使用。为解决此问题,助力高速高效运营&…...
Potree 点云可视化实战指南:从基础配置到高级测量技巧
1. Potree点云可视化入门指南 第一次接触Potree时,我被它处理海量点云数据的能力震撼到了。这个基于WebGL的开源库,能让普通浏览器流畅渲染上亿级别的点云数据。想象一下,不用安装专业软件,打开网页就能查看精细的激光扫描模型&am…...
Realtek 8852AE Wi-Fi 6驱动深度解析与实战指南
Realtek 8852AE Wi-Fi 6驱动深度解析与实战指南 【免费下载链接】rtw89 Driver for Realtek 8852AE, an 802.11ax device 项目地址: https://gitcode.com/gh_mirrors/rt/rtw89 问题引入:Wi-Fi 6网卡在Linux环境下的兼容性挑战 当您的Linux系统无法识别Realt…...
手把手教你用VSCode给Ai-WB2-12F烧录固件(含串口调试技巧)
手把手教你用VSCode给Ai-WB2-12F烧录固件(含串口调试技巧) 在物联网开发中,固件烧录是最基础也是最重要的环节之一。对于Ai-WB2-12F这款热门Wi-Fi/BLE双模模组,掌握高效的烧录方法能显著提升开发效率。本文将详细介绍如何利用VSC…...
GIL移除≠自动线程安全!揭秘Python 3.13+中asyncio+shared_memory+numpy.ndarray三者交汇处的5个未公开竞态漏洞
第一章:Python无锁GIL环境下的并发安全本质重构当Python脱离CPython解释器的全局解释器锁(GIL)约束——例如在PyPy的STM模式、Jython、Cython多线程扩展,或新兴的Rust-Python绑定(如PyO3 async-std)中运行…...
从零开始:Java使用通用物体识别-ResNet18镜像实现图像分类
从零开始:Java使用通用物体识别-ResNet18镜像实现图像分类 你是否想过,用Java写几行代码,就能让程序看懂一张图片里有什么?过去,这可能需要搭建复杂的Python环境、学习深度学习框架、处理繁琐的模型部署。但现在&…...
APDS9960手势传感器驱动开发与嵌入式实战
1. APDS9960手势传感器库技术解析与嵌入式工程实践APDS9960是一款由Broadcom(原Avago)推出的集成环境光、颜色、接近度及手势识别功能的多模态光学传感器芯片。其核心价值在于将传统分立式光感方案(如独立ALSProximityGesture模块)…...
终极指南:PrivateGPT增量文档处理策略与动态更新解决方案
终极指南:PrivateGPT增量文档处理策略与动态更新解决方案 【免费下载链接】privateGPT 利用GPT的强大功能与你的文档进行互动,确保100%的隐私保护,无数据泄露风险 项目地址: https://gitcode.com/GitHub_Trending/pr/privateGPT Priva…...
计算机毕业设计springboot智慧工地管理系统 基于SpringBoot的建筑施工现场数字化管理平台 SpringBoot驱动的工程现场人员考勤与薪资结算系统
计算机毕业设计springboot智慧工地管理系统 (配套有源码 程序 mysql数据库 论文) 本套源码可以在文本联xi,先看具体系统功能演示视频领取,可分享源码参考。 在当今的建筑工程领域,科技的进步正在以前所未有的速度改变着传统的工作…...
效率倍增:用快马云端jupyter notebook打造可复现、易协作的数据分析流水线
效率倍增:用快马云端jupyter notebook打造可复现、易协作的数据分析流水线 最近在团队里做数据分析时,经常遇到这样的困扰:每次新同事加入项目,都要花半天时间配置本地jupyter环境;好不容易跑通的代码,换台…...
2027年非全日制国际商务硕士备考规划-暨南大学(珠海研究院)
2027年非全日制国际商务硕士备考规划 一、基本情况与备考总原则 个人时间画像 工作日:19:20到家,19:30-20:00吃饭休息,20:00-23:00为黄金学习时段(约2.5-3小时)。23:30前入睡,保证7小时睡眠。 周末…...
