当前位置: 首页 > 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博客

http://www.lryc.cn/news/205302.html

相关文章:

  • 防止消息丢失与消息重复——Kafka可靠性分析及优化实践
  • 【Linux】Linux中Crontab(定时任务)命令详解及使用教程
  • 计算机毕设 flink大数据淘宝用户行为数据实时分析与可视化
  • 8.2 矢量图层点要素单一符号使用一
  • SQL企业微信群机器人消息推送
  • vscode远程连接ubuntu
  • Positive Technologies 在迪拜宣布与地区网络安全解决方案提供商开展合作
  • Pyside6 QTextEdit
  • Hadoop核心机制详细解析
  • Chromium源码由浅入深(一)
  • Spring Authorization Server 1.1 扩展 OAuth2 密码模式与 Spring Cloud Gateway 整合实战
  • UE4 UltraDynamicSky 天气与水体交互
  • Liunx 实时调度策略 SCHED_RR SCHED_FIFO 区别 适用情况
  • mac上使用虚拟机vm, 里面的镜像挂起会占用电脑的内存吗, 挂起和关机的区别是什么, 会影响正常电脑的内存和硬盘使用吗
  • AIGC时代 浪潮信息积极推动存储产品创新
  • 【PG】PostgreSQL字符集
  • 力扣:137. 只出现一次的数字 II(Python3)
  • orb-slam3编译手册(Ubuntu20.04)
  • 升级 Xcode 15模拟器 iOS 17.0 Simulator(21A328) 下载失败
  • PHP 函数、PHP 简单后门
  • 前端实现菜单按钮级权限
  • STM32:TTL串口调试
  • 【Jenkins 安装】
  • JVM——GC垃圾回收器
  • 【三维重建-PatchMatchNet复现笔记】
  • CSS - 常用属性和布局方式
  • 数据结构与算法之矩阵: Leetcode 134. 螺旋矩阵 (Typescript版)
  • LVS+keepalived高可用负载均衡集群
  • 解密Kubernetes:探索开源容器编排工具的内核
  • 苹果手机怎么设置壁纸?解锁设置壁纸的2种方法!