树多选搜索查询,搜索后选中状态仍保留

<template><div class="half-transfer"><div class="el-transfer-panel"><div><el-checkbox v-model="selectAll" @change="handleSelectAll">全部</el-checkbox></div><el-input v-model="searchInput" placeholder="请输入搜索内容" clearable @clear="clearSearch"></el-input><div class="el-transfer__list"><el-treeref="treeRef":data="treeData"node-key="key":default-expand-all="true"show-checkbox:default-checked-keys="checkedKeys":filter-node-method="filterNode"@check="handleCheckChange"></el-tree></div></div></div>
</template><script setup>
import { ref, reactive, watch, nextTick } from 'vue';
import { ElTree, ElCheckbox, ElInput } from 'element-plus';const searchInput = ref('');
const checkedKeys = ref([]);
const treeData = reactive([{key: 1,label: '选项1',children: [{ key: 11, label: '子选项11' },{ key: 12, label: '子选项12' },{ key: 13, label: '子选项13' },],},{key: 2,label: '选项2',children: [{ key: 21, label: '子选项21' },{ key: 22, label: '子选项22' },{ key: 23, label: '子选项23' },],},
]);
const selectAll = ref(false);
const treeRef = ref(null);watch(searchInput, (val) => {treeRef.value.filter(val);
});const filterNode = (value, data) => {if (!value) return true;return data.label.includes(value);
};const clearSearch = () => {searchInput.value = '';
};const handleSelectAll = (checked) => {if (checked) {checkedKeys.value = getAllNodeKeys();} else {checkedKeys.value = [];treeRef.value.setCheckedKeys([]);}
};const getAllNodeKeys = () => {const keys = [];const traverse = (nodes) => {for (const node of nodes) {keys.push(node.key);if (node.children && node.children.length > 0) {traverse(node.children);}}};traverse(treeData);return keys;
};const handleCheckChange = (data) => {checkedKeys.value = data.checkedKeys;// 获取树节点选中的idconsole.log(treeRef.value.getCheckedKeys())nextTick(() => {if (treeRef.value) {const nodes = treeRef.value.root.childNodes;const allChecked = nodes.every((node) => node.checked);selectAll.value = allChecked;}});
};
</script><style scoped>
.half-transfer {margin-top: 20px;margin-left: 20px;width: 335px;height: 260px;background: #fff;padding: 20px;border: 1px solid #dcdfe6;border-radius: 4px;
}.el-transfer-panel {display: flex;flex-direction: column;height: 100%;
}.el-transfer__list {overflow-y: auto;border-radius: 4px;margin-top: 8px;
}.el-transfer__list .el-checkbox-group {padding: 10px;
}.el-transfer__list .el-checkbox {display: block;margin-bottom: 5px;line-height: 24px;
}.el-transfer__list .el-checkbox:last-child {margin-bottom: 0;
}.el-transfer__list .el-scrollbar {background-color: #f5f7fa;
}
</style>

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

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

相关文章

journal日志导致服务器磁盘满

背景 ubuntu 18.04服务器磁盘突然100% 一查/var/log/journal目录占了14G 清理 要清理 journal 日志&#xff0c;可以使用以下步骤&#xff1a; 运行以下命令来查看 journal 日志的使用情况&#xff1a; journalctl --disk-usage这将显示 journal 日志的当前使用情况&#x…

Stable Diffusion 文生图技术原理

图像生成模型简介 图片生成领域来说&#xff0c;有四大主流生成模型&#xff1a;生成对抗模型&#xff08;GAN&#xff09;、变分自动编码器&#xff08;VAE&#xff09;、流模型&#xff08;Flow based Model&#xff09;、扩散模型&#xff08;Diffusion Model&#xff09;。…

SpringBoot与前端交互遇到的一些问题

一、XXX.jar中没有主清单属性 场景&#xff1a; SpringBoot打的jar包在Linux运行报错 解决方案&#xff1a; 百度找了很多都是一样的答案&#xff0c;但是解决不了我的问题&#xff0c;于是我新建了一个springboot项目发现打的jar包可以在Linux上运行。检查了下只要把下面这2个…

保护香港服务器的方法

保护香港服务器的方法 当你把一个香港服务器完全留给一个组织、应用程序或个人使用时&#xff0c;它被称为香港服务器租用。在这种类型的主机配置中&#xff0c;客户端将会借出整个服务器&#xff0c;并且不允许其他任何人使用它。 如果您计划使用香港服务器&#xff0c;安全性…

el-date-picker限制选择的时间范围

<el-date-pickersize"mini"v-model"dateTime"value-format"yyyy-MM-dd HH:mm:ss"type"datetimerange"range-separator"~"start-placeholder"开始日期"end-placeholder"结束日期":picker-options&quo…

[Python从零到壹] 七十.图像识别及经典案例篇之图像特效(怀旧、流年、光照和水波特效)

八月太忙,还是写一篇吧! 欢迎大家来到“Python从零到壹”,在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解,真心想把自己近十年的编程经验分享给大家,希望对您有所帮助,文章中不足…

非科班菜鸡算法学习记录 | 代码随想录算法训练营第51天||309.最佳买卖股票时机含冷冻期 714.买卖股票的最佳时机含手续费 股票总结

309.最佳买卖股票时机含冷冻期 309. Best Time to Buy and Sell Stock with Cooldown(英文力扣连接) 知识点&#xff1a;动规 状态&#xff1a;看思路ok 思路&#xff1a; 四个状态需要想&#xff0c;持有/不持有且过了冷却期/当天卖/正处于冷却期&#xff1b; 具体看注释…

ESP32-EYE编译笔记

1. 开发板介绍&#xff1a; https://www.espressif.com.cn/zh-hans/products/devkits/esp-eye/overview 2. ESP32-EYE代码库及环境搭建&#xff1a;https://github.com/espressif/esp-who/blob/master/docs/zh_CN/get-started/ESP-EYE_Getting_Started_Guide.md 3. ESP-IDF环…

MySQL事务原理、MVCC详解

事务原理 1 事务基础 1). 事务 事务 是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系 统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 2). 特性 原子性&#xff08;Atomi…

为什么mysql source命令导入数据比可视化工具执行sql文件快?

在一般情况下&#xff0c;使用MySQL的source命令导入数据比使用可视化工具执行SQL文件更快&#xff0c;这是因为涉及到了不同的执行方式和优化策略。 批量执行 vs. 逐条执行&#xff1a;source命令会将整个SQL文件作为一个批量进行执行&#xff0c;而可视化工具往往是逐条读取并…

【MySQL】表的增删查改(初阶)

MySQL中表的增删查改&#xff0c;即为CRUD&#xff0c;是增加&#xff08;Create&#xff09;查询&#xff08;Retrieve&#xff09;更新&#xff08;Update&#xff09;删除&#xff08;Delete&#xff09;四个单词首字母的缩写。 目录 1.新增 1.1单行数据全列插入 1.2多行…

LRU和LFU算法的简单实现

LRU #include <iostream> #include <unordered_map> #include <list> struct Node{int key;int value;Node(int key, int value):key(key),value(value){} }; class LruCache{ private:int maxCapacity;// 最大容量std::list<Node>CacheList;// 缓存链…

修改linux中tomcat的端口

随便修改一个 以8055为例子 开放8081端口 firewall-cmd --permanent --add-port8081/tcp firewall-cmd --reload firewall-cmd --list-all

Linux中的dpkg指令(dpkg -l | grep XXX等)

dpkg是Debian包管理系统中的一个工具&#xff0c;用于在Linux系统中安装、升级、删除和管理软件包。它是Debian、Ubuntu以及基于它们的发行版中的包管理器。 dpkg 有很多用法&#xff0c;常用之举例:dpkg -l | grep apt 显示系统中安装的与apt相关&#xff08;命名&#xff09…

Android 蓝牙开发( 二 )

前言 上一篇文章给大家分享了Android蓝牙的基础知识和基础用法&#xff0c;不过上一篇都是一些零散碎片化的程序&#xff0c;这一篇给大家分享Android蓝牙开发实战项目的初步使用 效果演示 : Android蓝牙搜索&#xff0c;配对&#xff0c;连接&#xff0c;通信 Android蓝牙实…

模拟实现应用层协议

模拟实现应用层协议 文章目录 模拟实现应用层协议应用层再谈协议 序列化和反序列化 网络版计算器自定义协议利用Json进行序列化和反序列化json库的安装条件编译 应用层 应用层&#xff08;Application layer&#xff09;是OSI模型的第七层。应用层直接和应用程序接口并提供常见…

在 WSL2 中使用 NVIDIA Docker 进行全栈开发和深度学习 TensorFlow pytorch GPU 加速

在 WSL2 中使用 NVIDIA Docker 进行全栈开发和深度学习 TensorFlow pytorch GPU 加速 0. 背景 0.1 起源 生产环境都是在 k8d pod 中运行&#xff0c;直接在容器中开发不好嘛&#xff1f;每次换电脑&#xff0c;都要配配配&#xff0c;呸呸呸新电脑只安装日常用的软件不好嘛&…

JVM虚拟机篇

JVM虚拟机篇 JVM介绍、运行流程 面试官&#xff1a; JVM由那些部分组成&#xff0c;运行流程是什么&#xff1f; 候选人&#xff1a; 嗯&#xff0c;好的~~ 在JVM中共有四大部分&#xff0c;分别是ClassLoader&#xff08;类加载器&#xff09;、Runtime Data Area&#x…

INDEMIND:“大+小”多机协同,实现机器人商用场景全覆盖

随着商用清洁机器人进入越来越多的场景中&#xff0c;单一的中型机器人并不能有效覆盖所有区域&#xff0c;更加细分化的产品组合正在成为新的趋势。 产品形态的“新趋势” 在商用场景中&#xff0c;目前的商用清洁机器人几乎均是中大型的产品形态&#xff0c;较大的体型意味…

视频汇聚/视频云存储/视频监控管理平台EasyCVR新增首次登录强制修改密码

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。视频汇聚平台既具…