vue3左树的全选和反选

 <el-input v-model="filterText" placeholder="" style="width: 48%"/><el-button type="primary" @click="handleSearch" class="ml-2">查找</el-button><el-radio-group v-model="form.choice" @change="handleCheckAll"><el-radio label="all" class="ml-2">全选</el-radio><el-radio label="invert">反选</el-radio></el-radio-group><el-treeref="treeRef"class="filter-tree":data="treeData":props="defaultProps"show-checkboxnode-key="id":filter-node-method="filterNode"><template #default="{ node, data }"><div style="display: flex;"><span style="margin-right: 8px">{{ node.label }}</span><span>
<!--            <a @click="append(data)"> Append </a>--><!--            <el-link  @click="remove(node, data)"><el-icon><Delete /></el-icon></el-link>--></span><!--          <IconifyIconOffline :icon="Del" class="relink-btn-icon" />--></div></template></el-tree>

const filterText = ref("");const treeRef = ref<InstanceType<typeof ElTree>>();
interface Tree {id: numberlabel: stringchildren?: Tree[]checked?: boolean;
}const defaultProps = {children: "children",label: "label"
};
const filterNode = (value: string, treeData: Tree) => {if (!value) return true;return treeData.label.includes(value);
};
const handleSearch = () => {treeRef.value!.filter(filterText.value);
}
const getAllNodeKeys = (nodes: Tree[], keys: number[] = []) => {nodes.forEach((node) => {keys.push(node.id);if (node.children) {getAllNodeKeys(node.children, keys);}});return keys;
};
const handleCheckAll = (value: string) => {if (value === 'all') {// for (let i = 0; i < treeData.value.length; i++) {// if (treeRef.value.getNode(treeData.value[i]).disabled == false) {//  treeRef.value.setChecked(treeData.value[i].id, true, true);//}//}const allKeys = getAllNodeKeys(treeData.value);treeRef.value!.setCheckedKeys(allKeys, false)} else {//treeRef.value.setCheckedKeys([])const allKeys = getAllNodeKeys(treeData.value);// 获取所有节点的 keyconst checkedKeys = treeRef.value?.getCheckedKeys() || [];// 获取当前选中的节点const newCheckedKeys = allKeys.filter((key) => !checkedKeys.includes(key)); // 新的选中节点为未选中的节点treeRef.value!.setCheckedKeys(newCheckedKeys)}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/4795.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习笔记:能量信号与功率信号(一)

目录 一、能量信号&#xff08;Energy Signal&#xff09; 二、功率信号&#xff08;Power Signal&#xff09; 三、信号关系图 四、总结 能量信号和功率信号是信号分析中两个基本的概念&#xff0c;它们主要用来描述信号在时间域中能量分布的特性&#xff0c;对于理解信号…

Faststone Capture:一触即发的效率革命【AI写作】

首先&#xff0c;这篇文章是基于笔尖AI写作进行文章创作的&#xff0c;喜欢的宝子&#xff0c;也可以去体验下&#xff0c;解放双手&#xff0c;上班直接摸鱼~ 按照惯例&#xff0c;先介绍下这款笔尖AI写作&#xff0c;宝子也可以直接下滑跳过看正文~ 笔尖Ai写作&#xff1a;…

苹果发布开源模型;盘古大模型5.0将亮相;英伟达将收购 Run:ai

苹果首次发布开源语言模型 近期&#xff0c;苹果在 Hugging Face 发布了 OpenELM 系列模型。OpenELM 的关键创新是逐层扩展策略&#xff0c;该策略可在 transformer 模型的每一层中有效地分配参数&#xff0c;从而提高准确性。 与具有统一参数分配的传统语言模型不同&#xff…

【免费Java系列】给大家出一些JavaSE基础第八天的内容案例 , 让大家更好的理解与掌握

String字符串 案例一 求取字符串的长度 public class Main {public static void main(String[] args) {String str "Hello World";String substring str.substring(6);System.out.println("截取后的字符串为&#xff1a;" substring);} }输出结果&…

windows下pysqlite3安装

pysqlite3 下载地址&#xff1a;SQLite Download Page windows下安装 首先在官网中下载以下文件 sqlite-amalgamation-3450300.zip #源码文件 sqlite-dll-win-x64-3450300.zip # 根据系统选择32或者64&#xff0c;可通过查看我的电脑属性中查看 sqlite-tools-win-x64-345…

springboot笔记一:idea社区版本创建springboot项目的方式

社区idea 手动maven 创建springboot项目 创建之后修改pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sc…

STM32使用PWM控制舵机

系列文章目录 STM32单片机系列专栏 C语言术语和结构总结专栏 文章目录 1. 舵机简介 2. 硬件连接 3. 代码实现 3.1 PWM.c 3.2 PWM.h 3.3 Servo.c 3.4 Servo.h 3.5 main.c 3.6 完整工程文件 PWM和OC输出详解&#xff1a; STM32定时器的OC比较和PWM​​​​​​​ 1. …

CentOS 7虚拟机配置过程中所需组件的安装(二)

1.安装net-tools组件&#xff08;解决无 ifconfig&#xff09; # yum install net-tools 2.安装gcc、c编译器以及内核文件 # yum -y install gcc gcc-c kernel-devel 验证安装成功 3.安装nano&#xff08;文本编辑器&#xff09; # yum install nano

python监听html click教程

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Python实现监听HTML点击事件 在Web开发中&#xff0c;经常需要在用户与页面交互时执行一些…

500V 直流充电桩测试负载箱的基础知识

500V直流充电桩测试负载箱是一种专门用于测试和验证直流充电桩性能的设备。它能够模拟真实的充电过程&#xff0c;对充电桩的输出电压、电流、功率等参数进行精确的测量和控制&#xff0c;以确保充电桩的稳定性和安全性。 一、工作原理 500V直流充电桩测试负载箱主要由电源模块…

【Linux】Linux上如何挂载磁盘

目录 一、查看磁盘使用情况df -h 查看已挂载磁盘的大概使用情况fdisk -l 查看主机上所有磁盘设备的详细情况lsblk 查看主机上所有磁盘设备基本信息 二、进行磁盘挂载mkfs 在特定的分区上建立 linux 文件系统mount 进行磁盘挂载文件系统配置 一、查看磁盘使用情况 df -h 查看已…

3分钟了解拍摄VR全景需要哪些硬件

VR全景图片是一张水平方向360度&#xff0c;垂直方向180度&#xff0c; 图片尺寸宽高比为2:1的图片。 通过720yun APP或720yun官网上传生成全景H5页面&#xff0c;即可360度全方位观看画面中的景象。 拍摄VR全景有很多方法&#xff0c;下面介绍用单反相机、全景相机、智能手机…

OceanBase开发者大会实录-杨传辉:携手开发者打造一体化数据库

本文来自2024 OceanBase开发者大会&#xff0c;OceanBase CTO 杨传辉的演讲实录—《携手开发者打造一体化数据库》。完整视频回看&#xff0c;请点击这里&#xff1e;> 各位 OceanBase 的开发者&#xff0c;大家上午好&#xff01;今天非常高兴能够在上海与大家再次相聚&…

使用这 7 个绩效评估模板简化您的员工评估

绩效评估受到了不好的评价&#xff1b;员工发现它们压力很大&#xff0c;而管理者则发现它们很耗时。 但随着绩效管理成为 2024 年人力资源的首要任务&#xff0c;也许是时候重新思考了。绩效评估模板可以帮助减轻评估过程的麻烦。通过为管理者提供一种简单、标准化的方法来评…

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 4月29日,星期一

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年4月29日 星期一 农历三月廿一 1、 移民管理局&#xff1a;5月6日起换发补发出入境证件可“全程网办”。 2、 文旅部宣布恢复两岸旅游新措施&#xff1a;将率先恢复福建居民到马祖旅游。 3、 网信办&#xff1a;整治用夸…

微软最新季度业绩结果充分说明了云和AI的增长、谷歌和AWS的竞争

微软最新的季度业绩超出了华尔街的各种预期&#xff0c;但对其服务合作伙伴来说&#xff0c;最重要的是这家科技巨头的预期&#xff1a;人工智能不仅能够增长&#xff0c;而且其云产品尚未达到稳定状态——人工智能是云的潜在增长加速器。 周五的一份分析师报告称&#xff0c;…

yo!这里是网络入门初识

目录 前言 基本概念 网络 协议 地址 网络传输流程 OSI七层模型 TCP/IP四层&#xff08;五层&#xff09;模型 流程图 数据封装&&分用 后记 前言 对于上一个专栏——Linux操作系统&#xff0c;我们学习了操作系统的基础知识以及基本的系统编程&#xff0c;其…

setTimeout回调函数 this指向问题

本文主要介绍setTimeout的回调函数的this指向问题 例子1&#xff1a;回调函数是一个普通函数 setTimeout 的回调函数是一个普通函数&#xff0c;而不是箭头函数&#xff0c;因此它有自己的上下文&#xff0c;this 指向全局对象&#xff08;在浏览器中是 window 对象&#xff…

挤压激励注意力 SE | Squeeze-and-Excitation Networks

论文名称&#xff1a;《Squeeze-and-Excitation Networks》 论文地址&#xff1a;https://arxiv.org/pdf/1709.01507.pdf 代码地址&#xff1a; https://github.com/hujie-frank/SENet 卷积神经网络 (CNN) 的核心构建块是卷积运算符&#xff0c;它使网络能够通过在每一层的局…

Linux进程基础概念子进程的创建

有着上一节我们对操作系统和冯诺依曼体系结构的理解&#xff0c;本篇我们便可以开始对 Linux 中的进程开始讲解。在本篇中对进程的基本概念进行了简单的介绍&#xff0c;然后通过对描述进程的 PCB&#xff0c;与 Linux 中的 task_struct 的详细讲解&#xff0c;使得对进程的概念…