使用element-UI Cascader组件,实现第一级单选选,第二级,第三级,子级可以多选(亲测有效)

news/2024/12/29 17:47:59/

思路: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;


http://www.ppmy.cn/news/1194503.html

相关文章

【机器学习】随机森林

随机森林 文章目录 随机森林1. 什么是集成学习方法2. 随机森林3. 随机森林工作过程4. API5. 总结 1. 什么是集成学习方法 集成学习方法通过建立几个模型组合来解决单一预测问题。它的工作原理就是生成多个分类器/模型&#xff0c;各自独立地学习和做出预测。这些预测最后结合成…

vcruntime140.dll在哪下载?vcruntime140.dll文件说明及其下载方法

vcruntime140.dll在哪下载&#xff1f;为啥还有这样的问题&#xff1f;其实就是你电脑的vcruntime140.dll文件丢失了&#xff0c;你需要重新去下载一个vcruntime140.dll文件&#xff0c;这时候你就会想这个东西到底要去哪里下载&#xff0c;今天我们就来给大家详细的解析一下&a…

react中的useState为什么是一个数组,而不是一个对象?

文章目录 前言数组的解构赋值对象的解构赋值总结后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;react.js &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误…

使用Navicat访问宝塔中的MySQL数据库

首先放开数据库权限 然后放开3306端口 数据库默认端口是3306&#xff0c;如果改了&#xff0c;这里就填改的那个端口 连接数据库 复制数据库用户名和密码 填入Navicat中&#xff0c;主机只需要填IP即可 连接成功

常用的网站扫描工具

破壳扫目录 7KB扫目录 safe3扫漏洞

EPOLL(C/S模型)实现I/O复用多进程聊天室,通过共享内存、socketpair实现父子进程通信,通过信号量回收进程

这里只展示了server端&#xff0c;client端可以用之前的poll写的。 每个client我们fork一个子进程用epoll来实现它的I/O复用。 非常巧妙的使用共享内存&#xff0c;通过给每个client编号以及BUFFER_SIZE保存需要广播和接受的内容&#xff0c;因为有了编号&#xff0c;所以父子进…

Docker学习——①

文章目录 1、什么是虚拟化、容器化&#xff1f;2、为什么要虚拟化、容器化&#xff1f;3、虚拟化实现方式3.1 应用程序执行环境分层3.2 虚拟化常见类别3.3 常见虚拟化实现3.3.1 主机虚拟化(虚拟机)实现3.3.2 容器虚拟化实现3.3.3 空间隔离实战--基础知识3.3.4 PID 隔离3.3.5 Mo…

Esxi安装OpenWrt

最近折腾下软路由主要就是实现局域网内的上网。 1.StarWind V2V Converter下载 先去下载个StarWind V2V Converter&#xff0c;觉得麻烦我在网上有找到一个博主的地址点击这里。 这是官网地址传送门&#xff0c;然后一阵乱输入点击下载 然后 双击之后无脑下一步即可。 2.Op…