使用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博客

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

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

相关文章

卡巴斯基2009杀毒软件

下载地址&#xff1a;https://user.qzone.qq.com/512526231/main https://user.qzone.qq.com/3503787372/main

ROS学习记录2018.7.10

ROS学习记录2018.7.10 1.ROS基础了解 开源机器人操作系统ROS&#xff08;robot operation system&#xff09; 分级&#xff1a; 1.计算图集&#xff08;一种网络结构&#xff09; 1.节点&#xff1a;执行运算的进程&#xff08;做基础处理的单元&#xff09;2.消息&#x…

输入/输出应用程序接口和设备驱动程序接口

文章目录 1.输入/输出应用程序接口1.字符设备接口2.块设备接口3.网络设备接口1.网络设备套接字通信 4.阻塞/非阻塞I/O 2.设备驱动程序接口1.统一标准的设备驱动程序接口 1.输入/输出应用程序接口 1.字符设备接口 get/put系统调用:向字符设备读/写一个字符 2.块设备接口 read/wr…

Ubuntu环境下DOSBOX的配置

【步骤一】 先打开命令行&#xff0c;进入root模式&#xff0c;输入如下语句&#xff1a; sudo apt-get install dosbox 该语句的作用主要是安装dosbox 【步骤二】 安装完成之后&#xff0c;命令行输入dosbox 会进入dosbox页面&#xff1a; 【步骤三】 在你的主机中&…

淘宝app商品详情源数据API接口(解决滑块问题)可高并发采集

通过API接口采集淘宝商品列表和app商品详情遇到滑块验证码的解决方法&#xff08;带SKU和商品描述&#xff0c;支持高并发&#xff09;&#xff0c;主要是解决了高频情况下的阿里系滑块和必须要N多小号才能解决的反扒问题&#xff0c;以后都可以使用本方法&#xff1a; 大家都…

统计数(C++)

系列文章目录 进阶的卡莎C++_睡觉觉觉得的博客-CSDN博客数1的个数_睡觉觉觉得的博客-CSDN博客双精度浮点数的输入输出_睡觉觉觉得的博客-CSDN博客足球联赛积分_睡觉觉觉得的博客-CSDN博客大减价(一级)_睡觉觉觉得的博客-CSDN博客小写字母的判断_睡觉觉觉得的博客-CSDN博客纸币(…

Kafka-Java四:Spring配置Kafka消费者提交Offset的策略

一、Kafka消费者提交Offset的策略 Kafka消费者提交Offset的策略有 自动提交Offset&#xff1a; 消费者将消息拉取下来以后未被消费者消费前&#xff0c;直接自动提交offset。自动提交可能丢失数据&#xff0c;比如消息在被消费者消费前已经提交了offset&#xff0c;有可能消息…

Ubuntu22.04 交叉编译阿里oss c-sdk

一、交叉编译openssl Ubuntu20.04 交叉编译openssl 1.0.1f_编译前去除 makefile 中所有的"-m64"字段_qq76211822的博客-CSDN博客文章浏览阅读319次。Ubuntu20.04 交叉编译openssl_编译前去除 makefile 中所有的"-m64"字段https://blog.csdn.net/sz7621182…

力扣刷题 day56:10-26

1.解码异或后的数组 未知 整数数组 arr 由 n 个非负整数组成。 经编码后变为长度为 n - 1 的另一个整数数组 encoded &#xff0c;其中 encoded[i] arr[i] XOR arr[i 1] 。例如&#xff0c;arr [1,0,2,1] 经编码后得到 encoded [1,2,3] 。 给你编码后的数组 encoded 和原…

【Java集合类面试二十三】、List和Set有什么区别?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;List和Set有什么区别&am…

python爬虫入门(六)BeautifulSoup使用

简单来说&#xff0c;BeautifulSoup 就是 Python 的一个 HTML 或 XML 的解析库&#xff0c;我们可以用它来方便地从网页中提取数据&#xff0c;官方的解释如下&#xff1a; BeautifulSoup 提供一些简单的、Python 式的函数用来处理导航、搜索、修改分析树等功能。它是一个工具…

Redis单线程还是多线程?

&#x1f603; 个人学习笔记&#xff0c;不喜勿喷&#xff0c;望大佬指正&#xff01; 目录 一、Redis为什么选择单线程1. 是什么&#xff1f;2. why&#xff0c;为什么之前选择单线程&#xff1f;3. 作者原话使用单线程原因&#xff0c;官网证据 二、 为什么逐渐加入多线程特性…

零基础Linux_23(多线程)线程安全+线程互斥(加锁)+死锁

目录 1. 线程安全 1.1 线程不安全前期 1.2 线程不安全原因 2. 线程互斥 2.1 加锁保护&#xff08;代码&#xff09; 2.2 锁的本质 3. 可重入对比线程安全 4. 死锁 4.1 死锁的必要条件 4.2 避免死锁 5. 笔试面试题 答案及解析 本篇完。 1. 线程安全 基于上一篇线程…

0基础学习PyFlink——用户自定义函数之UDTF

大纲 表值函数完整代码 在《0基础学习PyFlink——用户自定义函数之UDF》中&#xff0c;我们讲解了UDF。本节我们将讲解表值函数——UDTF 表值函数 我们对比下UDF和UDTF def udf(f: Union[Callable, ScalarFunction, Type] None,input_types: Union[List[DataType], DataTy…

【网安大模型专题10.19】论文6:Java漏洞自动修复+数据集 VJBench+大语言模型、APR技术+代码转换方法+LLM和DL-APR模型的挑战与机会

How Effective Are Neural Networks for Fixing Security Vulnerabilities 写在最前面摘要贡献发现 介绍背景&#xff1a;漏洞修复需求和Java漏洞修复方向动机方法贡献 数据集先前的数据集和Java漏洞Benchmark数据集扩展要求数据处理工作最终数据集 VJBenchVJBench 与 Vul4J 的…

NO.2 | 977.有序数组的平方 ,209.长度最小的子数组 ,59.螺旋矩阵II

NO.2 | 977.有序数组的平方 &#xff0c;209.长度最小的子数组 &#xff0c;59.螺旋矩阵II 题目链接&#xff1a;977.有序数组的平方 前置条件&#xff1a;数组是非递减的&#xff0c;如果是乱序的数组应该就只能暴力解法暴力解法&#xff1a;直接遍历&#xff0c;对每个元素都…

与AI对话,如何写好prompt?

玩转AIGC&#xff0c;优质的Prompt提示词实在是太重要了&#xff01;同样的问题&#xff0c;换一个问法&#xff0c;就会得到差别迥异的答案。你是怎样和AI进行对话交流的呢&#xff1f;我来分享几个&#xff1a; 请告诉我…我想知道…对于…你有什么看法&#xff1f;帮我解决…

腾讯云学生专享云服务器介绍及购买攻略

随着互联网技术的不断发展&#xff0c;越来越多的人开始关注云计算领域。作为国内领先的云计算服务商&#xff0c;腾讯云推出了“云校园”扶持计划&#xff0c;完成学生认证即可购买学生专享云服务器。 一、活动对象 仅限腾讯云官网通过个人认证的35岁以下学生用户参与&#x…

初识Node.js开发

一、Node.js是什么 1.node.js是什么 官方对Node.js的定义&#xff1a; Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境。 也就是说Node.js基于V8引擎来执行JavaScript的代码&#xff0c;但是不仅仅只有V8引擎&#xff1a; 前面我们知道V8可以嵌入到任何C 应用…

PULP Ubuntu18.04

1. 安装eda工具&#xff1a;questasim_10.7_linux64&#xff0c;网上有教程和方法&#xff0c;如有问题&#xff0c;可私信我 2. 代码下载&#xff1a; git clone https://github.com/pulp-platform/pulp 编译代码 cd pulp source setup/vsim.sh make checkout make scripts …