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-tree
                    ref="treeRef"
                    class="filter-tree"
                    :data="treeData"
                    :props="defaultProps"
                    show-checkbox
                    node-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: number
  label: string
  children?: 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 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);
      }
    }
  } else {
    treeRef.value.setCheckedKeys([])
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一文扫盲(5):实验室管理系统的界面设计

本次带来第5期&#xff1a;实验室管理系统的设计&#xff0c;从系统定义、功能模块、界面构成和设计着力点四个方面讲解&#xff0c;大千UI工场愿意持续和大家分享&#xff0c;欢迎关注、点赞、转发。 一、什么是实验室管理系统 实验室管理系统是一种用于管理和监控实验室运作…

【C++】友元--最全解析(友元是什么?我们应该如何理解友元?友元可以应用在那些场景?)

目录 一、前言 二、友元是什么&#xff1f; 三、友元的感性理解和分类 &#x1f95d;友元的感性理解 &#x1f34b;友元的三种分类 ✨友元 --- 全局函数 ✨友元 --- 成员函数 ✨友元 --- 类 四、友元函数的应用场景 &#x1f34d;操作符重载 :"<<" 与…

Nacos的介绍和使用Docker、MySQL持久化挂载安装

文章目录 Nacos的介绍和使用Docker、MySQL持久化挂载安装一、Nacos的介绍二、使用Docker和MySQL进行持久化安装1、选择想要使用的MySQL服务器&#xff0c;创建一个数据库nacos-config&#xff0c;然后运行下面sql2、在linux下的opt文件夹下创建 /opt/nacos/data文件夹 和 /opt/…

“卫星-无人机-地面”遥感数据快速使用及地物含量计算的实现方法

原文链接&#xff1a;“卫星-无人机-地面”遥感数据快速使用及地物含量计算的实现方法https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247601940&idx6&sn515e01666037570939aaf0eee56f46d1&chksmfa820ef3cdf587e5276eac181c890026b6ca4bc36ce0e4f80d89d…

测试的分类(2)

目录 按照执行方式分类 静态测试 动态测试 按照测试方法 灰盒测试 按照测试阶段分类 单元测试 集成测试 系统测试 冒烟测试 回归测试 按照执行方式分类 静态测试 所谓静态测试就是不实际运行被测软件,只是静态地检查程序代码, 界面或文档中可能存在错误的过程. 不以…

优先级队列(概念理解/底层模拟/时间复杂度分析)

目录 1.概念理解 2.优先级队列的底层模拟 2.1堆的概念 2.2优先队列的模拟实现 2.2.1把Heap类定义好 2.2.2初始化堆 2.2.3创建大堆 1.思路 以此二叉树为例&#xff1a; 图文理解&#xff1a; 2.思路转化为代码 2.2.4堆操作之offer&#xff08;进队列&#xff09; 1…

初识java——jdk?环境变量?及关于安装jdk的步骤

文章目录 JDK的安装在安装JDK时遇到的问题&#xff1a; 背景知识一 什么是jdkjdk简介jdk文件详解&#xff1a;1 bin目录&#xff1a;2 lib目录&#xff1a;3 include目录.exe文件是可执行的应用程序&#xff0c;这个我们都清楚&#xff0c;但.dll文件又是做什么的呢&#xff1f…

Advanced RAG 04:重排序(Re-ranking)技术探讨

编者按&#xff1a;重排序&#xff08;Re-ranking&#xff09;技术在检索增强生成&#xff08;Retrieval Augmented Generation&#xff0c;RAG&#xff09;系统中扮演着关键角色。通过对检索到的上下文进行筛选和排序&#xff0c;可以提高 RAG 系统的有效性和准确性&#xff0…

查找算法之顺序查找

目录 前言一、查找算法预备知识二、顺序查找三、总结3.1 查找性能3.2 适用场景 前言 查找算法是一种用于在数据集合中查找特定元素的算法。在计算机科学中&#xff0c;查找算法通常被用于在数组、链表、树等数据结构中查找目标元素的位置或者判断目标元素是否存在。 查找算法的…

爱尔兰启动其首个量子技术国家战略“量子 2030”

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨王珩 排版丨沛贤 800字丨5分钟阅读 摘要&#xff1a;爱尔兰推出了“量子 2030”&#xff0c;这是爱尔兰第一个量子技术国家战略。“量子 2030”将爱尔兰量子技术界的努力重点放在爱尔兰可以…

电脑文件加密软件有哪些?文件加密软件哪个好?

某企业的一位员工因不慎将包含敏感客户数据的电脑丢失&#xff0c;导致企业面临巨大的法律风险和经济损失。 这一事件凸显了电脑文件加密的必要性。 如果该企业事先采用了文件加密软件对敏感数据进行保护&#xff0c;即使电脑丢失&#xff0c;攻击者也无法轻易获取到文件内容…

STL_List与萃取

List 参考文章: https://blog.csdn.net/weixin_45389639/article/details/121618243 List源码 List中节点的定义&#xff1a; list是双向列表&#xff0c;所以其中节点需要包含指向前一节点和后一节点的指针&#xff0c; data是节点中存储的数据类型 template <class _Tp&g…

HCIP——MPLS(笔记)

MPLS--多协议标签交换技术 包交换 数据组成数据包&#xff0c;之后&#xff0c;在各个网络节点中不断传递&#xff0c;最终到达目标。包交换转发效率不高的问题所在&#xff1a;1&#xff0c;在整个包交换的过程中&#xff0c;需要先查询路由表之后再查看ARP缓存表两张表来完…

Java:内部类

目录 1.内部类介绍2.实例内部类3.静态内部类4.局部内部类5.匿名内部类 1.内部类介绍 当一个事物的内部&#xff0c;还有一个部分需要一个完整的结构进行描述&#xff0c;而这个内部的完整的结构又只为外部事物提供服务&#xff0c;那么这个内部的完整结构最好使用内部类。在 J…

KDD‘23 | AlphaMix: 高效专家混合框架(MoE)显著提高上证50选股表现

KDD23 | AlphaMix: 高效专家混合框架&#xff08;MoE&#xff09;显著提高上证50选股表现 原创 QuantML QuantML 2024-04-18 09:17 上海 Content 本文提出了一个名为AlphaMix的新型三阶段专家混合&#xff08;Mixture-of-Experts&#xff0c;MoE&#xff09;框架&#xff0c;…

信息流广告大行其是,微博回望“原生”的初心

摘要&#xff1a;有流量的地方&#xff0c;就当有原生信息流广告 信息流广告&#xff0c;自2006年Facebook推出后就迅速火遍全球数字营销界&#xff0c;被誉为实现了广告主、用户、媒体平台三赢。特别是随着OCPM/OCPX大放异彩&#xff0c;信息流广告几乎成为广告主的必选项&…

达梦数据库的AWR报告

达梦数据库的AWR报告 数据库快照是一个只读的静态的数据库。 DM 快照功能是基于数据库实现的&#xff0c;每个快照是基于数据库的只读镜像。通过检索快照&#xff0c;可以获取源数据库在快照创建时间点的相关数据信息。 为了方便管理自动工作集负载信息库 AWR&#xff08;Auto…

数据结构实验(二)

单链表的基本操作 一、总的设计思路(c++实现) 1、首先定义一个包含name、gender、student_number、hobbies的学生信息结构体。 2、接着一一写出:链表初始化(initialize)函数、后插法插入(insert)函数、打印信息(output)函数、对链表结点进行排序(sortList)函数、…

【Qt 学习笔记】Qt常用控件 | 按钮类控件 | Check Box的使用及说明

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 按钮类控件 | Check Box的使用及说明 文章编号&#xff…

华为ensp中MSTP多网段传输协议(原理及配置命令)

作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年4月22日15点29分 在华为ENSP中&#xff0c;MSTP&#xff08;多段传输协议&#xff09;是重要的生成树协议&#xff0c;它扩展了STP&#xff08;生成树协议&#xff09…