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

使用element-UI Cascader组件,实现第一级单选选,第二级,第三级,子级可以多选

最近开发过程中,遇到需求测一个需求,就是级联选择器,需要多选;但是第一级是单选; 既要单选又要复选。参照网上内容,自己整理了一下功能实现;

如下图:

思路:1.把第一层的复选框去掉

           2. 在第一层切换的时候,如果第一次分类改变了,把已有的值清空

代码如下:

html部分:<el-cascader:popper-class="'first-no-check-cascader'"v-model="settingTypeValue":options="treeData":props="{value: 'id',label: 'name',children: 'children',emitPath: false,multiple: true,}":show-all-levels="true"clearable@expand-change="changeSourceType"></el-cascader>css部分:// 级联选择器,第一级不需要复选框
.first-no-check-cascader {.el-cascader-panel {.el-cascader-menu:first-child {.el-cascader-node {.el-checkbox {display: none !important;}}}}
}函数部分:
cascaderTag:[], // 暂存点击时已有的tag
changeSourceType(selectItem) {// 一级分类只能选一个,如果一级分类修改了,清空已有值if (!this.cascaderTag.includes(selectItem[0])) {this.settingTypeValue = [];}this.cascaderTag = selectItem;},

参考文章:Element UI级联选择器 多选模式下,实现同一父级下最多只能选中一个子级_element级联选择器可输入-CSDN博客

相关文章:

使用element-UI Cascader组件,实现第一级单选选,第二级,第三级,子级可以多选

最近开发过程中&#xff0c;遇到需求测一个需求&#xff0c;就是级联选择器&#xff0c;需要多选&#xff1b;但是第一级是单选&#xff1b; 既要单选又要复选。参照网上内容&#xff0c;自己整理了一下功能实现&#xff1b; 如下图&#xff1a; 思路&#xff1a;1.把第一层的…...

防止消息丢失与消息重复——Kafka可靠性分析及优化实践

系列文章目录 上手第一关&#xff0c;手把手教你安装kafka与可视化工具kafka-eagle Kafka是什么&#xff0c;以及如何使用SpringBoot对接Kafka 架构必备能力——kafka的选型对比及应用场景 Kafka存取原理与实现分析&#xff0c;打破面试难关 防止消息丢失与消息重复——Kafka可…...

【Linux】Linux中Crontab(定时任务)命令详解及使用教程

文章目录 前言1.使用yum命令安装Crontab&#xff1a;2.查看Crontab状态&#xff1a;3.添加定时任务&#xff1a;4.查看任务列表&#xff1a;5.Crontab相关命令&#xff1a;6.部分脚本无法执行问题&#xff1a;7.Crontab默认调度任务&#xff1a;8.注意清理系统用户的邮件日志&a…...

计算机毕设 flink大数据淘宝用户行为数据实时分析与可视化

文章目录 0 前言1、环境准备1.1 flink 下载相关 jar 包1.2 生成 kafka 数据1.3 开发前的三个小 tip 2、flink-sql 客户端编写运行 sql2.1 创建 kafka 数据源表2.2 指标统计&#xff1a;每小时成交量2.2.1 创建 es 结果表&#xff0c; 存放每小时的成交量2.2.2 执行 sql &#x…...

8.2 矢量图层点要素单一符号使用一

文章目录 前言单一符号&#xff08;Single symbol&#xff09;渲染简单标记(Simple Marker)QGis代码实现 SVG标记&#xff08;SVG marker&#xff09;QGis代码实现 总结 前言 上一篇教程对矢量图层符号化做了一个整体介绍&#xff0c;并以点图层为例介绍了可以使用的渲染器&am…...

SQL企业微信群机器人消息推送

--参考资料地址 --微软官方地址: https://learn.microsoft.com/zh-cn/sql/relational-databases/system-stored-procedures/ole-automation-stored-procedures-transact-sql?view=sql-server-ver16 --腾讯官方地址:https://developer.work.weixin.qq.com/ --使…...

vscode远程连接ubuntu

修改环境变量&#xff0c;改使用git自带的ssh工具 openssh: C:\Windows\System32\OpenSSH\ssh.exeGit ssh: C:\Program Files\Git\usr\bin\ssh.exe vscode安装插件remote-ssh 重开软件&#xff0c;在左侧拓展入口下方&#xff0c;进入远程资源管理器 点击设置&#xff0c;进…...

Positive Technologies 在迪拜宣布与地区网络安全解决方案提供商开展合作

在中东最大的信息技术展 GITEX GLOBAL 2023 的间隙&#xff0c;Positive Technologies 同意与八家组织&#xff08;网络安全服务和解决方案提供商&#xff09;合作&#xff0c;在该地区开展合作&#xff0c;推广最先进的产品&#xff0c;并分享信息安全领域的经验。该公司强调了…...

Pyside6 QTextEdit

Pyside6 QTextEdit QTextEdit使用QTextEdit常用函数文本编辑类函数文本框格式设置函数设置文字颜色设置文字背景颜色设置文字格式设置文本框样式程序设置界面设置 QTextEdit信号textChanged信号 完整程序界面程序主程序 QTextEdit类提供了一个用于编辑和显示纯文本和富文本的组…...

Hadoop核心机制详细解析

Hadoop核心机制详细解析 Hadoop的核心机制是通过HDFS文件系统和MapReduce算法进行存储资源、内存和程序的有效利用与管理。在现实的实例中&#xff0c;通过Hadoop&#xff0c;可以轻易的将多台普通的或低性能的服务器组合成分布式的运算-存储集群&#xff0c;提供大数据量的存…...

Chromium源码由浅入深(一)

工作中需要对Chromium源码、尤其是源码中图形部分进行深入研究&#xff0c;所以借此机会边学习边写文章&#xff0c;分享一下我的实时学习研究Chromium源码的由浅入深的过程。 闲言少叙&#xff0c;书归正传。 通过命令行启动Chrome浏览器&#xff0c;命令及结果如下&#xf…...

Spring Authorization Server 1.1 扩展 OAuth2 密码模式与 Spring Cloud Gateway 整合实战

目录 前言无图无真相创建数据库授权服务器maven 依赖application.yml授权服务器配置AuthorizationServierConfigDefaultSecutiryConfig 密码模式扩展PasswordAuthenticationTokenPasswordAuthenticationConverterPasswordAuthenticationProvider JWT 自定义字段自定义认证响应认…...

UE4 UltraDynamicSky 天气与水体交互

最上面的Lerp的A通道为之前的水面效果&#xff0c;B是做的冰面效果 用Dynamic_Landscape_Weather_Effects的BaseColor的R通道四舍五入作为Lerp的Alpha值 使用一张贴图&#xff0c;乘以RadialGradientExponential对材质边缘做弱化&#xff0c;RadialGradientExponential的Raid…...

Liunx 实时调度策略 SCHED_RR SCHED_FIFO 区别 适用情况

SCHED_RR SCHED_FIFO 适用情况 SCHED_FIFO 先进先出调度。只能在静态优先级高于0的情况下使用&#xff0c;这意味着当 SCHED_FIFO 线程变得可运行时&#xff0c;它总是立即抢占当前正在运行的任何 SCHED_OTHER、SCHED_BATCH 或 SCHED_IDLE 线程。SCHED_FIFO 线程一直运行到被…...

mac上使用虚拟机vm, 里面的镜像挂起会占用电脑的内存吗, 挂起和关机的区别是什么, 会影响正常电脑的内存和硬盘使用吗

解释 在Mac&#xff08;或任何其他操作系统&#xff09;上使用虚拟机&#xff08;如VMware Fusion、Parallels Desktop、VirtualBox等&#xff09;时&#xff0c;“挂起”&#xff08;Suspend&#xff09;和“关机”&#xff08;Power Off或Shut Down&#xff09;是两种不同的虚…...

AIGC时代 浪潮信息积极推动存储产品创新

近几年&#xff0c;AIGC的兴起&#xff0c;进一步驱动了全闪、混闪等存储产品的创新&#xff0c;也为市场带来了新的机遇&#xff0c;对于厂家而言&#xff0c;也需要升级存储产品的容量、性能及功能&#xff0c;方能满足场景诉求。对此&#xff0c;浪潮信息面向AIGC应用场景打…...

【PG】PostgreSQL字符集

目录 设置字符集 1 设置集群默认的字符集编码 2 设置数据库的字符集编码 查看字符集 1 查看数据字符集编码 2 查看服务端字符集 3 查看客户端字符集 4 查看默认的排序规则和字符分类 被支持的字符集 PostgreSQL里面的字符集支持你能够以各种字符集存储文本&#xff0c…...

力扣:137. 只出现一次的数字 II(Python3)

题目&#xff1a; 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每个元素都恰出现 三次 。请你找出并返回那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法且使用常数级空间来解决此问题。 来源&#xff1a;力扣&#xff08;Lee…...

orb-slam3编译手册(Ubuntu20.04)

orb-slam3编译手册&#xff08;Ubuntu20.04&#xff09; 一、环境要求1.安装git2.安装g3.安装CMake4.安装vi编辑器 二、源代码下载三、依赖库下载1.Eigen安装2.Pangolin安装3.opencv安装4.安装Python & libssl-dev5.安装boost库 三、安装orb-slam3四、数据集下载及测试 写在…...

升级 Xcode 15模拟器 iOS 17.0 Simulator(21A328) 下载失败

升级 IDE Xcode 15 后本地模拟器 Simulator 全被清空,反复重新尝试 Get 下载频频因网络异常断开而导致失败 ... 注:通过 Get 方式下载一定要保证当前网络环境足够平稳,网络环境不好的情况下该方法几乎成不了 解决办法 Get 方式行不通可以尝试通过 官网 途径先下载 模拟器安装包…...

国家中小学智慧教育平台电子课本PDF下载工具:教育资源的智能获取方案

国家中小学智慧教育平台电子课本PDF下载工具&#xff1a;教育资源的智能获取方案 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具&#xff0c;帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载&#xff0c;让您更方便地获取课本内容…...

FastBle单元测试终极指南:Mockito在Android蓝牙BLE开发中的7个实战技巧

FastBle单元测试终极指南&#xff1a;Mockito在Android蓝牙BLE开发中的7个实战技巧 【免费下载链接】FastBle Android Bluetooth Low Energy (BLE) Fast Development Framework. It uses simple ways to filter, scan, connect, read ,write, notify, readRssi, setMTU, and mu…...

全国霸王餐 API 接口聚合平台,Java 后端多数据源路由策略设计

全国霸王餐 API 接口聚合平台&#xff0c;Java 后端多数据源路由策略设计 在构建全国性的霸王餐&#xff08;Free Meal&#xff09;与外卖CPS聚合平台时&#xff0c;单一的数据源架构往往无法支撑海量的并发请求与复杂的业务隔离需求。随着业务规模的扩张&#xff0c;系统通常面…...

AllCells细胞原料解析:Leukopak与PBMC在CGT中的应用【曼博生物供应人原代细胞】

AllCells细胞原料体系解析&#xff1a;Leukopak与PBMC在CGT中的应用 摘要&#xff1a; AllCells作为DLS体系中的重要品牌&#xff0c;提供GMP与RUO级人源细胞原料&#xff0c;包括Leukopak与PBMC等产品类型&#xff0c;广泛应用于细胞与基因治疗研发及生产流程。 关键词&#x…...

Codesys软运动控制进阶:用SMC_FreeEncoder为ECAT轴搭建一个“虚拟手轮”调试工具

Codesys软运动控制进阶&#xff1a;用SMC_FreeEncoder为ECAT轴搭建虚拟手轮调试工具 在自动化设备开发周期中&#xff0c;机械安装与电气调试往往存在时间差。当机械部件尚未就位或伺服驱动器临时故障时&#xff0c;如何提前验证运动控制逻辑&#xff1f;传统做法是等待硬件就绪…...

Jetson Orin Nano环境搭建避坑实录:从JetPack到PyQt5,我踩过的那些‘坑’都帮你填平了

Jetson Orin Nano环境搭建避坑实录&#xff1a;从JetPack到PyQt5的实战指南 第一次拿到Jetson Orin Nano这块开发板时&#xff0c;我天真地以为按照官方文档就能轻松搞定所有环境配置。结果从JetPack安装到PyQt5编译&#xff0c;几乎每一步都遇到了意想不到的问题。这篇文章不会…...

MongoDB Compass完全指南:从安装到精通的5个关键步骤

MongoDB Compass完全指南&#xff1a;从安装到精通的5个关键步骤 【免费下载链接】compass The GUI for MongoDB. 项目地址: https://gitcode.com/gh_mirrors/com/compass 数据库管理是否还在依赖命令行输入&#xff1f;面对复杂的JSON结构是否感到无从下手&#xff1f;…...

新手入门网络安全:用快马AI生成你的第一个密码强度检测器

最近在自学网络安全基础知识&#xff0c;发现密码强度检测是个很好的入门实践。作为新手&#xff0c;我尝试用InsCode(快马)平台的AI辅助功能&#xff0c;快速生成了一个密码强度检测器&#xff0c;整个过程特别适合零基础学习者。这里记录下实现思路和关键要点&#xff1a; 密…...

OpenClaw对话式编程:Qwen3-14B辅助代码生成与调试

OpenClaw对话式编程&#xff1a;Qwen3-14B辅助代码生成与调试 1. 为什么需要对话式编程助手 作为一个长期与代码打交道的开发者&#xff0c;我经历过太多深夜调试的煎熬时刻——盯着报错信息反复修改却始终无法通过测试&#xff0c;或是为了一个简单的功能翻遍Stack Overflow…...

3大阶段解决TrollInstallerX安装失败问题

3大阶段解决TrollInstallerX安装失败问题 【免费下载链接】TrollInstallerX A TrollStore installer for iOS 14.0 - 16.6.1 项目地址: https://gitcode.com/gh_mirrors/tr/TrollInstallerX TrollInstallerX作为一款专为iOS 14.0至16.6.1设备设计的TrollStore安装器&…...