当前位置：首页 > news >正文

el-select+el-tree实现下拉树形选择

news 来源：原创 2025/6/30 19:52:34

主要实现el-select下使用树结构,支持筛选功能

封装的组件 composeTree.vue

<template><div class="vl-tree"><el-select class="treeScroll" popper-class="treeScrollSep"v-model="selectedList"placeholder="请选择"filterable:filter-method="handleFilter" multiplecollapse-tagssize="mini"@visible-change="handleSelectVisibleChange"@remove-tag="removeTag"><el-tree :filter-node-method="filterNode" show-checkbox ref="tree"@check-change="handleCheckChange":data="treeList" node-key="id":props=" {children: 'children',label: 'name',value: 'id',}"><template slot-scope="{ node, data }"><slot :node="node" :data="data"><span class="custom-tree-node">{{data.name}}</span></slot></template></el-tree><el-option value="" style="display: none;"></el-option></el-select></div>
</template>
<script>
import { debounce } from '@/utils';  
let orgList = [];//列表初始值
export default {props: {selectedIdList: {type: Array,default: () => []},treeList: {type: Array,default: () => []}},model: {prop: 'selectedIdList',//选中的数组event: 'updateSelectedIdList'},watch: {selectedIdList: {handler(val) {debugger;this.$nextTick(() => {this.$refs['tree'].setCheckedKeys(val,true);})},immediate: true},treeList: {handler(val) {if (val) {orgList=JSON.parse(JSON.stringify(val));}},immediate: true}},data() {return {list: [],searchVal: '',noFilterTreeNode: false,//是否过滤树节点selectedList: [],}},created() {},methods: {//筛选handleFilter(val) {if (this.noFilterTreeNode) return;this.searchVal = val;let allList = JSON.parse(JSON.stringify(orgList));if (val == '') {this.searchList = allList;} else {this.searchList = this.filterTreeByKeyword(allList, val);}let self = this;debounce(function() {self.$nextTick(() => {self.$refs['tree']?.filter(val);})},300,false)()},filterTreeByKeyword(treeData, keyword) {let result = [];function traverse(nodes) {for (let node of nodes) {if (node.name.includes(keyword)) {// 如果当前节点的 bareName 包含关键词，则添加到结果数组中result.push(node);}if (node.children && node.children.length > 0) {// 如果有子节点，则递归处理子节点列表traverse(node.children);}}}traverse(treeData); // 开始遍历整个树结构return result;},filterNode(value, data, node) {if (!value) return true;let obj = {has: false};this.searchList.map(item => {if (item.id == data.id) {obj.has = true;} else {let children = item.children || [];this.hasFilterNode(children, data.id, obj)}})return obj.has;},hasFilterNode(children, id, obj) {if (obj.has) {return true;} else {for (let i = 0; i < children.length; i++) {let child = children[i];if (child.id == id) {obj.has = true;return true;} else {let children2 = child.children || [];this.hasFilterNode(children2, id, obj)}}}},removeTag(val) {let obj = this.checkedNodeList.find(item => item.name === val);this.$refs.tree.setChecked(obj.id, false);},// handleSelectChange() {//     let arr = [];//     this.selectedList.map(item => {//         let obj = this.checkedNodeList.find(val => val.name === item);//         if (obj) {//             arr.push(obj);//         }//     })//     this.checkedNodeList = arr;//     this.handleTreeSelect(arr);//变更树的选择// },//类别树值变动handleTreeSelect(row) {let arr = row.map(item => item.id);this.$refs['tree'].setCheckedKeys(arr,true);},handleSelectVisibleChange(val) {if (!val) {//select框隐藏时，重置树结构this.noFilterTreeNode = false;if (this.searchVal) {this.handleFilter('')}}},//树选择变化handleCheckChange() {let checkList=this.$refs['tree'].getCheckedNodes(true);this.selectedList = checkList.map(item => item.name);this.$emit('updateSelectedList', checkList.map(item => item.id));this.checkedNodeList = checkList;this.noFilterTreeNode = true;//避免vl-tree筛选问题},}
}
</script>

页面中引用组件

<template><div><h2>下拉框中树结构及搜索功能</h2><div v-for="(v,i) in list" :key="i" class="box"><composeTree  :id="v.id" v-model="v.selectedIdList" :treeList="treeList"><!--  <template #default="{node,data}"><div>{{data.name}}-{{ data.id }}</div></template> --></composeTree></div></div>
</template>
<script>
import composeTree from './composeTree.vue';
export default {data() {return {list: [{id: 1,selectedIdList:['Option001']},{id: 2,selectedIdList:['Option111']}],treeList:[]}},components: {composeTree},created() {const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const options = Array.from({ length: 50 }).map((_, idx) => ({id: `Option${idx + 1}`,name: `${initials[idx % 10]}${idx}`,children: [{id: `Option${'0' + idx + 1}`,name: `${initials[idx % 10]}${'0'+idx}`,},{id: `Option${'1' + idx + 1}`,name: `${initials[idx % 10]}${'1'+idx}`,}]}));this.treeList = options;}
}
</script>
<style lang="less" scoped>
.box {margin-bottom: 20px;
}
</style>

el-select+el-tree实现下拉树形选择

主要实现el-select下使用树结构,支持筛选功能封装的组件 composeTree.vue <template><div class"vl-tree"><el-select class"treeScroll" popper-class"treeScrollSep"v-model"selectedList"placeholder"请选择…...

编程日记 2025/6/30 19:52:34

JavaScript函数知识点总结

JavaScript函数是一种可重复使用的代码块，它接受输入值（参数）、执行特定任务，并返回输出值。 1. 声明函数 function greet(name) {return "Hello, " + name + "!"; }console.log(greet("Alice")); // 输出: Hello, Alice! console.log( t…...

编程日记 2025/6/29 9:50:51

SQL INSERT INTO 语句详解

SQL INSERT INTO 语句详解引言 SQL（Structured Query Language）是数据库管理系统的标准语言，用于处理数据库中的数据。在SQL中，INSERT INTO 语句是用于向数据库表中插入新记录的重要命令。本文将详细介绍 INSERT INTO 语句的用…...

编程日记 2025/6/30 19:47:14

为什么可视化大屏越来越多应用3D元素呢？

现在可视化大屏应用3D元素越来越普及了，背后的原因是什么呢？3D元素相较于2D元素有什么优势？应用3D元素涉及到哪些技术呢？大象数据工场通过本文与大家分享一下。一、3D元素普及的原因是什么？ 可视化大屏应用中使用3D…...

编程日记 2025/6/28 7:16:18

Github配置 GitHub 默认支持两种 Content-Type： application/json application/x-www-form-urlencoded 特别要注意 Content-Type 我们选择： application/json Flask代码 import os import shutil import subprocess from flask import Flask, request, jsonifyapp = Fla…...

编程日记 2025/6/28 3:25:14

MySQL的基础语法1（增删改查、DDL、DML、DQL和DCL）

目录一、基本介绍二、SQL通用语法三、SQL分类(DDL、DML、DQL、DCL) 1.DDL 1.1数据库操作 1.2表操作 1.2.1表操作-查询创建 1.2.2表操作-数据类型 1）数值类型 2）字符串类型 3）日期时间类型编辑 4）表操作-案例 1.2.3…...

编程日记 2025/6/29 11:24:44

基于 SpringBoot 的火车订票管理系统

收藏关注不迷路！！ 🌟文末获取源码数据库🌟 感兴趣的可以先收藏起来，还有大家在毕设选题（免费咨询指导选题），项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多…...

编程日记 2025/6/28 4:31:13

c#的反射和特性

在 C# 中，反射（Reflection）和特性（Attributes）是两个强大的功能，它们在运行时提供元编程能力，广泛用于框架开发、对象映射和动态行为扩展。以下是对它们的详细介绍，包括定义、用法、…...

编程日记 2025/6/27 13:11:30

MaxEnt物种分布建模全流程；R+ArcGIS+MaxEnt模型物种分布模拟、参数优化方法、结果分析制图与论文写作

融合R语言的MaxEnt模型具有以下具体优势： 数据处理高效便捷 📊强大的数据预处理功能：R语言提供了丰富的数据处理工具，能够轻松完成数据清洗、筛选、转换等操作，为MaxEnt模型提供高质量的输入数据。 🌐自动…...

编程日记 2025/6/28 6:24:28

【AI插件开发】Notepad++插件开发实践：从基础交互到ScintillaCall集成

一、背景与目标在文本编辑器领域，Notepad凭借其轻量级特性和强大的插件生态，成为开发者群体中的热门选择。作为基于Scintilla组件构建的编辑器（Scintilla是开源的代码编辑控件，被Notepad、Geany等知名工具广泛采用）&…...

编程日记 2025/6/30 19:45:16

TCP/IP协议的应用层与传输层

TCP/IP协议簇是互联网的核心通信框架，定义了数据如何在网络中封装、寻址、传输和路由（确定数据包从源主机到目标主机的传输路径的过程）。应用层直接面向用户和应用，负责实现网络服务的具体功能（如网页浏览、文件传输…...

编程日记 2025/6/28 21:51:10

CentOS与Ubuntu命令对比指南：从软件包管理到系统配置

CentOS与Ubuntu命令对比指南作为两大主流Linux发行版，**CentOS（基于RHEL）和Ubuntu（基于Debian）**在日常运维中常因命令差异引发混淆。本文通过关键场景对比，助您快速掌握两者的核心操作区别。一、软件包管理：yum/dnf vs apt 操作CentOSUbuntu更新软件源yum check-upd…...

编程日记 2025/6/28 13:27:30

python-leetcode 61.N皇后

题目： 按照国际象棋的规则，皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题研究的是如何将 n 个皇后放置在 nn 的棋盘上，并且使皇后彼此之间不能相互攻击给你一个整数 n ，返回所有不同的 n 皇后问题的解…...

编程日记 2025/6/29 8:57:46

Scala 正则表达式

Scala 正则表达式引言正则表达式（Regular Expression）是一种强大的文本处理工具，在Scala编程语言中也有着广泛的应用。Scala正则表达式可以帮助开发者高效地进行字符串匹配、搜索、替换和解析等操作。本文将深入探讨Scala正则表达式的相关知识，包括语法、常用模式、匹配…...

编程日记 2025/6/28 7:14:17

【分布式】分布式限流方案解析

文章目录固定窗口限流方案实现方式优点缺点滑动窗口限流方案实现方式优点缺点令牌桶限流方案实现方式优点缺点漏斗限流方案实现方式优点缺点在分布式系统蓬勃发展的当下，系统面临的流量挑战日益复杂。为确保系统在高并发场景下…...

编程日记 2025/6/30 19:51:36

Docker 拉取镜像部分成功部分失败？

🐋 Docker 拉取镜像部分成功部分失败？一次代理配置踩坑记录！ 最近在部署 Zitadel 身份认证平台的过程中，遇到一个看似“随机”的问题：Docker 有些镜像可以拉取，有些却一直超时失败。最终通过配置 Docker 守…...

编程日记 2025/6/28 21:50:15

Spring AI Alibaba 对话记忆使用

一、对话记忆 (ChatMemory)简介 1、对话记忆介绍 ”大模型的对话记忆”这一概念，根植于人工智能与自然语言处理领域，特别是针对具有深度学习能力的大型语言模型而言，它指的是模型在与用户进行交互式对话过程中，能够追踪、理解并利…...

编程日记 2025/6/28 21:42:50

Mysql从入门到精通day5————子查询精讲

本文主要讲述子查询的几种方法，读者注意体会它们的不同场合的适用情况及功能，本篇文章也融入了小编实践过程遇到的坑，希望读者不要再踩坑一.带IN关键字的子查询 in关键字可以检测结果集中是否存在某个特定的值，检测成功则执行外…...

编程日记 2025/6/28 21:36:48

QScreen 捕获屏幕(截图)

一、QScreen核心能力解析硬件信息获取 // 获取主屏幕对象 QScreen* primaryScreen QGuiApplication::primaryScreen();// 输出屏幕参数 qDebug() << "分辨率:" << primaryScreen->size(); qDebug() << "物理尺寸:" << primar…...

编程日记 2025/6/30 19:50:26

Skyeye 云智能制造办公系统 VUE 版本 v3.15.15 发布

Skyeye 云智能制造，采用 Springboot winUI 的低代码平台、移动端采用 UNI-APP。包含 30 多个应用模块、50 多种电子流程，CRM、PM、ERP、MES、ADM、EHR、笔记、知识库、项目、门店、商城、财务、多班次考勤、薪资、招聘、云售后、论坛、公告、问卷、报表…...

编程日记 2025/6/28 21:31:04

【最新】探索CFD的未来：从OpenFOAM到深度学习，全面解析计算流体力学的顶级资源与前沿技术

计算流体力学（CFD）作为现代工程与科学研究的核心工具，正以前所未有的速度迈向智能化与多物理场耦合的新时代。本文全面梳理了在线学习CFD的顶级资源，涵盖了从传统数值模拟到深度学习驱动的物理信息模型的广泛领域，旨在为研究者、工程师和学生提供一站式参考指南。内容分为…...

编程日记 2025/6/28 3:10:13

【QT5 网络编程示例】TCP 通信

文章目录 TCP 通信 TCP 通信 QT主要通过QTcpSocket 和 QTcpServer两个类实现服务器和客户端的TCP 通信。 QTcpSocket 是 Qt 提供的套接字类，看用于建立、管理和操作 TCP 连接。常用方法 connectToHost(host, port)：连接到指定服务器。disconnectFro…...

编程日记 2025/6/28 5:06:30

QT五文件系统,QFile,QfileInfo

总览 QIODevice：所有 I/O 设备类的父类，提供了字节块读写的通用操作以及基本接口；QFileDevice：Qt5新增加的类，提供了有关文件操作的通用实现。QFlie：访问本地文件或者嵌入资源；QTemporaryFile&a…...

编程日记 2025/6/28 6:00:05

OpenMCU(五)：STM32F103时钟树初始化分析

概述本文主要描述了STM32F103初始化过程系统时钟的初始化,主要描述了系统时钟的初始化，AHB总线时钟，APB总线时钟等的初始化。硬件板卡3d图时钟树 STM32F103的时钟树，如下所示: 时钟源选择从STM32F103的时钟树框图，我们可以…...

编程日记 2025/6/28 3:52:53

docker save如何迁移镜像更节省空间？

文章目录方法一：使用docker save命令方法二：直接保存多个镜像到一个tar文件哪个方法更节省磁盘空间？空间效率对比实际测试示例其他优势结论如何用脚本迁移加载镜像迁移镜像时候，往往会碰到基础镜像相同的很多镜像需要迁移&…...

编程日记 2025/6/28 1:22:45

在 UniApp 编译小程序时出现 `:class` 不支持 `getStatusClass(device.deviceStatus)` 语法的报错

在 UniApp 编译小程序时出现 :class 不支持 getStatusClass(device.deviceStatus) 语法的报错，这是因为在非 H5 平台，v-bind:class（:class 是其简写形式）里直接使用方法调用这种动态计算类名的方式可能不被支持。下面为你提供几种…...

编程日记 2025/6/30 10:44:41

Python之贪心算法

Python实现贪心算法(Greedy Algorithm) 概念贪心算法是一种在每一步选择中都采取当前状态下最优的选择，从而希望导致结果是全局最优的算法策略。基本特点局部最优选择：每一步都做出当前看起来最佳的选择不可回退：一旦做出选择&#xf…...

编程日记 2025/6/27 21:13:44

Javaweb后端AOP记录操作日志

日志记录表提示词切入点表达式，注解的方法查询不用加上日志记录功能...

编程日记 2025/6/28 6:25:51

obsidian ios git同步

首先感谢几位博主的文章，我现在时间久了，未保存原文地址。以下是我自己的执行步骤总结。应用商店安装 iSH 打开iSH，执行 apk update 安装下面软件，（我觉得只安装第一个应该就行，下次测试）。 …...

编程日记 2025/6/30 1:36:57

我的机器学习学习之路

学习python的初衷 • hi，今天给朋友们分享一下我是怎么从0基础开始学习机器学习的。 • 我是2023年9月开始下定决心要学python的，目的有两个，一是为了提升自己的技能和价值，二是将所学的知识应用到工作中去，提升工作…...

编程日记 2025/6/30 7:59:01

Python的ASGI Web 服务器之uvicorn

文章目录什么是uvicornUvicorn 和 uWSGI 对比区别安装 Uvicorn使用示例什么是uvicorn 官网https://www.uvicorn.org/ Uvicorn 是一个用于 Python 的 ASGI Web 服务器实现。 Until recently Python has lacked a minimal low-level server/application interface for async…...

编程日记 2025/6/30 4:16:27

Spring Boot分布式项目实战：装饰模式的正确打开方式

我在最近参与的物流中台项目中，面对复杂的分布式服务调用场景时，发现装饰模式（Decorator Pattern）竟成为提升系统扩展性的秘密武器。当某个基础服务接口需要同时支持缓存、日志、限流等多种能力时，传统的继承方式已难以…...

编程日记 2025/6/28 3:21:00

基于WebSocket的金融数据实时推送系统架构设计对接多国金融数据API

基于WebSocket的金融数据实时推送系统架构设计 ——高可用、低延迟与全球化数据支持的技术实践一、实时数据推送的技术演进在证券交易、外汇监控、量化策略等场景中，毫秒级延迟可能带来完全不同的业务结果。早期基于HTTP轮询的方案存在三大核心问题&#xff1a…...

编程日记 2025/6/28 1:22:48

Java虚拟机JVM知识点(已完结)

JVM内存模型介绍下内存模型根据JDK8的规范，我们的JVM内存模型可以拆分为：程序计数器、Java虚拟机栈、堆、元空间、本地方法栈，还有一部分叫直接内存，属于操作系统的本地内存，也是可以直接操作的。详细解释一下程…...

编程日记 2025/6/28 4:28:51

ffuf：一款高效灵活的Web模糊测试利器

在网络安全领域，模糊测试（Fuzzing）是一种强大的技术，用于发现系统中的隐藏功能、潜在漏洞或未公开资源。而在Web渗透测试中，ffuf（Fast Fuzzing Tool）凭借其高效性、灵活性和强大的自定义能力&am…...

编程日记 2025/6/30 7:59:01

深入理解二叉树、B树与B+树：原理、应用与实现

文章目录引言一、二叉树：基础而强大的结构基本概念特性分析Java实现应用场景二、B树：适合外存的多路平衡树基本概念关键特性查询流程示例Java简化实现典型应用三、B树：数据库索引的首选核心改进优势分析范围查询示例Java简化实现实际应用 …...

编程日记 2025/6/28 4:11:22

NLP高频面试题（二十八）——Reward model是如何训练的，怎么训练一个比较好的Reward model

在强化学习领域，**奖励模型（Reward Model）是关键组件之一，旨在通过预测特定行为或输出的奖励值，指导智能体的学习方向。特别是在基于人类反馈的强化学习（RLHF）**中，奖励模型通过整合…...

编程日记 2025/6/28 1:22:47

基础算法篇（3）（蓝桥杯常考点）-图论

前言这期是蓝桥杯常考点的最后一章了，其中的dijkstra算法更是蓝桥杯中的高频考点图的基本相关概念有向图和无向图自环和重边稠密图和稀疏图对于不带权的图，一条路径的路径长度是指该路径上各边权值的总和对于带权的图，一条路径长度时…...

编程日记 2025/6/28 6:42:34

【力扣hot100题】（017）矩阵置零

还是挺简单的，使用哈希表记录需要置换的行列即可，这样就可以避免重复节省时间。 class Solution { public:void setZeroes(vector<vector<int>>& matrix) {unordered_set<int> row;unordered_set<int> line;for(int i0;i&l…...

编程日记 2025/6/28 7:03:11

量子退火与机器学习（2）：少量实验即可找到新材料，黑盒优化➕量子退火

使用量子退火和因子分解机设计新材料这篇文章是东京大学的一位博士生的毕业论文中的主要贡献。结合了黑盒优化和量子退火，是融合的非常好的一篇文章，在此分享给大家。 https://journals.aps.org/prresearch/abstract/10.1103/PhysRevResearch.2.0133…...

编程日记 2025/6/28 5:22:10

Ubuntu 系统上完全卸载 CasaOS

以下是在 Ubuntu 系统上完全卸载 CasaOS 的详细步骤一.卸载验证二.卸载步骤 1.停止并禁用 CasaOS 服务 # 停止 CasaOS 核心服务 sudo systemctl stop casaos.service# 禁用开机自启 sudo systemctl disable casaos.service# 确认服务状态（应显示 inactive&…...

编程日记 2025/6/28 4:26:03

Flutter敏感词过滤实战：基于AC自动机的高效解决方案

Flutter敏感词过滤实战：基于AC自动机的高效解决方案在社交、直播、论坛等UGC场景中，敏感词过滤是保障平台安全的关键防线。本文将深入解析基于AC自动机的Flutter敏感词过滤实现方案，通过原理剖析实战代码性能对比，带你打造毫秒级…...

编程日记 2025/6/27 19:40:27

Java Spring Boot 与前端结合打造图书管理系统：技术剖析与实现

目录运行展示引言系统整体架构后端技术实现后端代码文件前端代码文件1. 项目启动与配置2. 实体类设计3. 控制器设计4. 异常处理前端技术实现1. 页面布局与样式2. 交互逻辑系统功能亮点1. 分页功能2. 搜索与筛选功能3. 图书操作功能总结运行展示引言本文将详细剖析一个基…...

编程日记 2025/6/28 6:31:04

高精度加减乘除 + R 格式

蓝桥账户中心高精度核心思路：使用vector存储每一位数，倒序存储，即数组从低到高存储的是个位数。注意减法、乘法、除法都需要去掉前导零加法： vector<int> add(vector<int> &A, vector<int> &B) …...

编程日记 2025/6/28 4:35:57

鸿蒙编译构建-多目标产物

此文章内容兼容API12，使用harmony next应用开发前置概念介绍 1，配置文件介绍： build-profile.json5：modules字段，用于记录工程下的模块信息，主要包含模块名称、模块的源码路径以及模块的 target 信息oh-…...

编程日记 2025/6/28 5:04:36

从零开始：Windows 系统中 PowerShell 配置 FFmpeg 的详细步骤

在Windows系统中不想每次都 cd 到FFmpeg目录中应用，现在可以通过PowerShell在任意目录下应用了。 PowerShell 基础概念跨平台脚本工具 PowerShell 是微软开发的命令行外壳和脚本语言，支持 Windows、Linux 和 macOS 系统。其核心优势在于面向对象的操作…...

编程日记 2025/6/27 16:02:37

Spring Boot 支持哪些日志框架？推荐和默认的日志框架是哪个？

Spring Boot 支持多种日志框架，以下是详细介绍： 支持的日志框架 Logback Logback 是 Log4j 创始人设计的另一个开源日志组件，作为 Log4j 的改良版本，它具有更快的执行速度、更丰富的配置选项以及更好的性能。Logback 分为三个模块…...

编程日记 2025/6/28 5:13:46

【STM32单片机】#4 OLED调试外部中断

主要参考学习资料： B站江协科技 STM32入门教程-2023版细致讲解中文字幕开发资料下载链接：https://pan.baidu.com/s/1h_UjuQKDX9IpP-U1Effbsw?pwddspb 单片机套装：STM32F103C8T6开发板单片机C6T6核心板实验板最小系统板套件科协实验&…...

编程日记 2025/6/28 4:35:38

[7-02-02].第15节:生产经验 - 消费者相关操作

Kafka笔记大纲五、生产经验——分区的分配以及再平衡: 4.1.生产经验——分区的分配以及再平衡 4.2.参数： 5.4.1 Range 以及再平衡...

编程日记 2025/6/28 7:06:14

cmd命令查看电脑的CPU、内存、存储量

目录获取计算机硬件的相关信息的命令分别的功能结果展示结果说明获取计算机硬件的相关信息的命令 wmic cpu get name wmic memorychip get capacity wmic diskdrive get model,size,mediaType分别的功能获取计算机中央处理器（CPU）的名称获取计算机内存（RAM）芯片的容量…...

编程日记 2025/6/27 20:59:40

相关文章：