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

Element UI CascaderPanel级联组件使用和踩坑总结

Element UI CascaderPanel级联组件使用和踩坑总结

问题背景

需求中需要用到Element UI的 CascaderPanel组件,并且支持多选,定制化需求,比如某节点被选择,等价于该节点下面所有子节点都被选择, CascaderPanel组件返回的选择数据为选择的所有节点,需要过滤到只返回到最上方被选中的层级。如图所示:
在这里插入图片描述

问题分析

(1)el-cascader-panel组件基本使用

                <el-cascader-panel ref="test" :options="myOptions" @change="handNodeChange('test')"  v-model="myOptionsSelectedAreas" :props="{ multiple: true }">

(2)过滤所有节点,过滤方法:!(item.parent && item.parent.checked),即排除掉父节点存在且被选中的节点,得到过滤后的节点:

            // 监听级联组件数据变化,隐藏父组件选择状态下的子组件。handNodeChange(value) {let checkedNodeList = this.$refs[value].getCheckedNodes();checkedNodeList = checkedNodeList.filter(item => {return !(item.parent && item.parent.checked);});this[value] = checkedNodeList;this.myOptionsStandardSelectedAreas = [];checkedNodeList.forEach(item => {this.myOptionsStandardSelectedAreas.push(item.path.join('-'));});},

(3)坑:最后一级即叶子结点,也有children只不过children=[],这就导致组件无法确定最后一级,所以无法触发change事件。把叶子节点的children删除即可(该坑在Element Plus中测试已没有)。

          // 遍历得到需要的树结构dealNodeTree(node) {if (!node) {return null;}let temNode = this.changeNode(node);if (temNode.children) {// 处理children字段temNode.children = temNode.children.map(item => {return this.dealNodeTree(item);});}return temNode;},

(4)服务器返回的字符串,或者选中数组直到选中节点最高父级,需要获取所有选中的子节点,才能让级联组件正常显示。
dfs对根节点进行深度遍历,获取所有路径,存到全路径列表中,和最高级父节点进行匹配,显示匹配的节点即可。

            getAllPath(node, path = []) {if (!node) {return null; // 如果为空节点则返回null}const currentVal = node.value; // 当前节点值path.push(currentVal); // 将当前节点值添加到路径数组中if (!node.children || node.children.length === 0) {// console.log('路径:', path); // 输出完整路径this.myResult.push(path);} else {for (let i = 0; i < node.children.length; i++) {this.getAllPath(node.children[i], [...path]); // 对每个子节点进行递归调用}}// path.pop(); // 移除最后一个元素,因为已经处理过该节点了},

相关文章:

Element UI CascaderPanel级联组件使用和踩坑总结

Element UI CascaderPanel级联组件使用和踩坑总结 问题背景 需求中需要用到Element UI的 CascaderPanel组件&#xff0c;并且支持多选&#xff0c;定制化需求&#xff0c;比如某节点被选择&#xff0c;等价于该节点下面所有子节点都被选择&#xff0c; CascaderPanel组件返回…...

Oracle全系列版本官网下载保姆及教程

Oracle全系列版本官网下载方法 下面以下载Oracle12cR2为例说明下载的整个过程。 基本步骤如下&#xff1a; 先注册一个Oracle账号并登录&#xff1b;进入到客户下载页面搜索要下载的数据库版本&#xff1b;得到Oracle下载器(Oracle_SSN_DML_xxxxx.exe)&#xff0c;注意&#xf…...

漏洞扫描是最该被防范的安全问题

在当今的网络环境中&#xff0c;漏洞扫描是一项至关重要的任务。随着技术的不断进步&#xff0c;网络攻击的威胁也在持续增长&#xff0c;而漏洞扫描是防范这些威胁的关键手段之一。 在某平台发起的“网络安全从业人员现状调查”中&#xff0c;在“哪些与网络安全息息相关&…...

Unity 工具 之 Azure 微软连续语音识别ASR的简单整理

Unity 工具 之 Azure 微软连续语音识别ASR的简单整理 目录 Unity 工具 之 Azure 微软连续语音识别ASR的简单整理 一、简单介绍 二、实现原理 三、注意实现 四、实现步骤 五、关键脚本 一、简单介绍 Unity 工具类&#xff0c;自己整理的一些游戏开发可能用到的模块&#x…...

MLP-Mixer: An all-MLP Architecture for Vision

Abstract 在计算机视觉领域,卷积神经网络(CNNs)是首选的模型。最近,基于注意力机制的网络,如Vision Transformer,也变得流行起来。在这篇论文中,我们展示了卷积和注意力虽然都足以实现良好的性能,但它们两者都不是必需的。我们提出了MLP-Mixer,这是一种仅基于多层感知…...

redis前缀匹配数据迁移数据

背景&#xff1a; 阿里云的dts不支持前缀匹配迁移。 调研发现RedisShake可以前缀匹配迁移。 https://github.com/tair-opensource/RedisShake proxy 代理模式 阿里云的redis cluster 默认是proxy 代理模式&#xff0c; 不支持增量迁移。 如果要支持增量迁移需要开启 redis clu…...

云贝教育 |【技术文章】存储对象的LIBRARY CACHE LOCK/PIN实验(一)

注: 本文为云贝教育 刘峰 原创&#xff0c;请尊重知识产权&#xff0c;转发请注明出处&#xff0c;不接受任何抄袭、演绎和未经注明出处的转载。 实验环境 操作系统&#xff1a;Red Hat Enterprise Linux release 8.8 (Ootpa) 数据库&#xff1a;oracle Version 19.3.0.0.0 …...

C# 快速模指数运算 快速求余运算

此方法解决这样一个问题&#xff0c;就是a^b mod m 的余数是多少。 如果直接计算a^b&#xff0c;方次很大的时候&#xff0c;会溢出&#xff0c;而且时间很长。 当然指数很小的时候直接用自带的Math函数就行&#xff0c;如果指数很大的时候&#xff0c;可以用以下的方法。 原…...

Chisel入门初步0

注&#xff1a;以下所有配置在Ubuntu22.04笔记本中运行 chisel模板构建 复制项目模板文件 git clone https://github.com/schoeberl/chisel-examples.git安装vscode插件Metals 打开顶层目录&#xff0c;并设置为项目文件夹 打开终端输入 tree -L 3 # 查看三层目录结构得到…...

MySQL 8.0中移除的功能(一)

以下项目已经过时并在MySQL 8.0中被删除。如果有替代方案&#xff0c;请务必更新应用程序以使用这些替代方案。 对于在MySQL 8.0中被删除的功能&#xff0c;如果从MySQL 5.7源复制到MySQL 8.0副本时&#xff0c;可能会导致语句失败&#xff0c;或者在源和副本上产生不同的效果…...

可抓取性和可索引性:它们是什么以及如何影响搜索引擎优化

什么是可抓取性&#xff1f; 网页的可抓取性是指搜索引擎&#xff08;如谷歌&#xff09;发现网页的难易程度。 谷歌发现网页的过程称为爬行。它使用称为网络爬虫&#xff08;也称为机器人或蜘蛛&#xff09;的计算机程序。这些程序会跟踪网页之间的链接&#xff0c;以发现新…...

Django教程第4章 | Web开发实战-三种验证码实现

系列&#xff1a;Django学习教程 验证码的存在是为了防止系统被暴力破解攻击&#xff0c;几乎每个系统都有验证码。下面将介绍三种生成验证码方式。 您可以根据你自己的需要进行学习。 手动生成验证码 安装绘图依赖&#xff0c;利用的是画图模块 PIL 以及随机模块 random 在后…...

深度探讨 Golang 中并发发送 HTTP 请求的最佳技术

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在 Golang 领域&#xff0c;并发发送 HTTP 请求…...

VUE指令(二)

vue会根据不同的指令&#xff0c;针对不同的标签实现不同的功能。指令是带有 v- 前缀的特殊标签属性。指令的职责是&#xff0c;当表达式的值改变时&#xff0c;将其产生的连带影响&#xff0c;响应式地作用于 DOM。 8、v-for&#xff1a;基于数据循环&#xff0c;多次渲染整个…...

开源对象存储服务器MinIO本地部署并结合内网穿透实现远程访问管理界面

文章目录 前言1. Docker 部署MinIO2. 本地访问MinIO3. Linux安装Cpolar4. 配置MinIO公网地址5. 远程访问MinIO管理界面6. 固定MinIO公网地址 前言 MinIO是一个开源的对象存储服务器&#xff0c;可以在各种环境中运行&#xff0c;例如本地、Docker容器、Kubernetes集群等。它兼…...

【TypeScript】tsconfig.json文件到底是干啥的?作用是什么?

参考学习博文&#xff1a; 掌握tsconfig.json 一、tsconfig.json简介 1、tsconfig.json是什么&#xff1f; TypeScript 使用 tsconfig.json 文件作为其配置文件&#xff0c;当一个目录中存在 tsconfig.json 文件&#xff0c;则认为该目录为 TypeScript 项目的根目录。 通常…...

wagtail的数据模型和渲染

文章目录 前言页面数据模型数据库字段部分搜索部分编辑面板基础面板结构化面板父页面/子页面类型规则页面URLs自定义页面模型的URL模式获取页面实例的URL 模板渲染为页面模型添加模板模板上下文自定义模板上下文更改模板动态选择模板Ajax 模板 内联模型在多个页面类型之间重用内…...

OpenHarmony4.0适配LVDS屏幕驱动

1.概述 手头有一块RK3568的开发板OK3568-C&#xff0c;但是还没有适配OpenHarmony&#xff0c;用的还是LVDS屏幕&#xff0c;但是官方和网上好像还没有OpenHarmony4.0的LVDS屏幕驱动的通用实现&#xff0c;所以决定尝试了一下适配该开发板&#xff0c;完成LVDS屏幕驱动的适配&…...

【playwright】新一代自动化测试神器playwright+python系列课程01-playwright驱动浏览器

Playwright驱动浏览器 安装 Playwright 时&#xff0c;Playwright默认自动安装了三种浏览器&#xff08;Chromium、Firefox 和 WebKit&#xff09;。我们可以驱动这三种浏览器中的任意一种。 使用with上下文管理器 启动chromium浏览器 python # # author: 测试-老姜 交流…...

POSIX API与网络协议栈

本文介绍linux中与tcp网络通信相关的POSIX API&#xff0c;在每次调用的时候&#xff0c;网络协议栈会进行的操作与记录。 POSIX API Posix API&#xff0c;提供了统一的接口&#xff0c;使程序能得以在不同的系统上运行。简单来说不同的操作系统进行同一个活动&#xff0c;比…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...