如何实现el-select多选下拉框中嵌套复选框并加校验不为空功能呢?
如何实现el-select多选下拉框中嵌套复选框并加校验不为空功能呢?
- 要实现的效果图
- 选择部分品牌但不选选项效果
- 问题概述
- 实现方案
- el-select组件与el-checkbox组件无缝衔接
- 给form表单加自定义校验规则
要实现的效果图

选择部分品牌但不选选项效果

问题概述
相信大家看到上面的两张图片后,在脑子里多少会有一些实现思路,这是我最近在开发中遇到的一个小功能,本来看起来挺简单的,愣是控了我两个小时。立马有了一个记录下来的想法,以保证以后遇到一样的问题不被控。
下面我来说一下,我在做这个功能时遇到的一些问题。
第一个问题,el-select组件如何跟el-checkbox组件无缝衔接呢?
第二个问题,如何给这个form表单加校验呢?
实现方案
- 通过自定义下拉框内容嵌套复选框组件
- 通过@click.stop阻止下拉框中的原来的点击事件
- 通过自定义校验规则实现选择部分品牌时,下拉框不能为空功能
el-select组件与el-checkbox组件无缝衔接
实现代码如下:
<el-radio-group style="margin-bottom: 10px" v-model="radio"><el-radio label="all">全部品牌</el-radio><el-radio label="part">部分品牌</el-radio>
</el-radio-group>
<el-selectv-if="radio === 'part'"v-model="brandList"multipleplaceholder="请选择品牌"
><el-checkbox-groupv-model="brandList"@change="handleBrandChecked"><el-optionv-for="item in brandOptions":key="item.value":label="item.label":value="item.value"><div @click.stop><el-checkbox :label="item.value">{{ item.label }}</el-checkbox></div></el-option></el-checkbox-group>
</el-select>
温馨提示:一定要记得在data和methods中定义所需要的数据和方法哦
代码如下:
<script>export default {data() {return {// 单选框绑定值radio: '',// 品牌绑定值brandList: [],// 品牌选项brandOptions: [{value: "option1",label: "选项1",},{value: "option2",label: "选项2",},{value: "option3",label: "选项3",},],};},methods: {handleBrandChecked(val) {console.log(val);}}}
</script>
给form表单加自定义校验规则
最终代码如下:
<el-form label-position="top" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"><el-form-item label="授权品牌" prop="licensingBrand"><el-radio-group style="margin-bottom: 10px" v-model="ruleForm.licensingBrand"><el-radio label="all">全部品牌</el-radio><el-radio label="part">部分品牌</el-radio></el-radio-group><el-select v-if="ruleForm.licensingBrand === 'part'" v-model="brandList" multiple placeholder="请选择品牌"><el-checkbox-group v-model="brandList" @change="handleBrandChecked"><el-option v-for="item in brandOptions" :key="item.value" :label="item.label" :value="item.value"><div @click.stop><el-checkbox :label="item.value">{{ item.label }}</el-checkbox></div></el-option></el-checkbox-group></el-select></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {var checkLicensingBrand = (rule, value, callback) => {if(value === 'part'){if(this.brandList.length === 0){callback(new Error("请选择授权品牌"));}else{callback();}}else{callback();}};return {ruleForm: {licensingBrand: '',},rules: {licensingBrand: [{ required: true, message: "请选中授权品牌", trigger: ["blur", "change"] },{ validator: checkLicensingBrand, trigger: 'change' }],},// 品牌绑定值brandList: [],// 品牌选项brandOptions: [{value: "option1",label: "选项1",},{value: "option2",label: "选项2",},{value: "option3",label: "选项3",},],};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.brandList = [];this.$refs[formName].resetFields();}}}
</script>
到此,想要的效果就实现了。
有需要的朋友,拿走不谢
咱们下次再见。
相关文章:
如何实现el-select多选下拉框中嵌套复选框并加校验不为空功能呢?
如何实现el-select多选下拉框中嵌套复选框并加校验不为空功能呢? 要实现的效果图选择部分品牌但不选选项效果问题概述实现方案el-select组件与el-checkbox组件无缝衔接给form表单加自定义校验规则 要实现的效果图 选择部分品牌但不选选项效果 问题概述 相信大家看到…...
源码理解 UE4中的 FCookStatsManager::FAutoRegisterCallback RegisterCookStats
官方文档:https://dev.epicgames.com/documentation/zh-cn/unreal-engine/API/Runtime/Core/ProfilingDebugging/FCookStatsManager文档中的注释: When a cook a complete that is configured to use stats (ENABLE_COOK_STATS), it will broadcast this…...
Android 根据内存大小显示MTP模式连接PC时的名称
项目有两种内存,要求根据连接电脑拷贝文件时的盘符名称根据内存大小显示不同名称。 frameworks/base/media/java/android/mtp/MtpDatabase.java//mh import android.app.ActivityManager; ...-894,7 896,19 public class MtpDatabase implements AutoCloseable {p…...
不只是mini-react第一节:实现最简单mini-react
项目总结构: ├─ 📁core │ ├─ 📄React.js │ └─ 📄ReactDom.js ├─ 📁node_modules ├─ 📁tests │ └─ 📄createElement.spec.js ├─ 📄App.js ├─ 📄in…...
前端路由layout布局处理以及菜单交互(三)
上篇介绍了前端项目部署以及基本依赖的应用,这次主要对于路由以及布局进行模块化处理 一、 创建layout模块 1、新建src/layout/index.vue <template><el-container class"common-layout"><!-- <el-aside class"aside">&l…...
小结:DNS,HTTP,SMTP,IMAP,FTP,Telnet,TCP,ARP,ICMP
DNS(Domain Name System,域名系统) 是互联网的重要组成部分,它负责将人类易读的域名(如 www.google.com)转换为机器可以识别的 IP 地址(如 142.250.72.206)。这一过程被称为域名解析…...
【C++】P2550 [AHOI2001] 彩票摇奖
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯题目描述输入格式:输出格式:输入输出样例: 💯题解思路1. 问题解析 💯我的实现实现逻辑问题分析 💯老…...
并发服务器框架——zinx
zinx框架 Zinx 是一个用 Go 语言编写的高性能、轻量级的 TCP 服务器框架,它被设计为简单、快速且易于使用。Zinx 提供了一系列的功能,包括但不限于连接管理、数据编解码、业务处理、负载均衡等,适用于构建各种 TCP 网络服务,如游戏…...
Unity 中计算射线和平面相交距离的原理
有此方法 能够计算射线和平面是否相交以及射线起点到平面交点的距离 代码分析 var dot Vector3.Dot(ray.direction, plane.normal);计算射线和平面法线的点积,如果大于等于0,则说明射线和平面没有相交,否则,说明射线和平面相交…...
浅谈棋牌游戏开发流程七:反外挂与安全体系——守护游戏公平与玩家体验
一、前言:为什么反外挂与安全这么重要? 对于任何一款线上棋牌游戏而言,公平性和玩家安全都是最重要的核心要素之一。如果游戏环境充斥着各式各样的外挂、作弊方式,不仅会毁坏玩家体验,更会导致游戏生态崩塌、口碑下滑…...
《无力逃脱》V1.0.15.920(59069)官方中文版
艾丹是一名三臂赏金猎人,他必须追捕银河系中最危险、最难以捉摸的割喉者。 有些悬赏是金钱,有些则是有价值的信息。艾丹可以利用这些信息找到让他走上这条路的人,同时也会卷入一个全银河系的阴谋中。 拥有三条手臂可以让你同时对付更多的敌…...
六种主流服务器的选择与使用
网络的运行离不开各种服务器,它们各司其职,为我们提供稳定的网络服务。本文带大家了解6种常见服务器类型。 服务器的六大种类 第一种:Web服务器 Web服务器是互联网的核心。当你打开一个网站,比如百度或淘宝,浏览器会…...
TiDB 升级至高版本提示'mysql.tidb_runaway_watch' doesn't exist 问题处理
作者: asd80703406 原文来源: https://tidb.net/blog/90394c97 背景 近期发现很多人从低版本升级至TiDB v7 或者v8版本,均遇到了tidb-server启动失败,提示报错如下: ["get runaway watch record failed"…...
GRU-PFG:利用图神经网络从股票因子中提取股票间相关性
“GRU-PFG: Extract Inter-Stock Correlation from Stock Factors with Graph Neural Network” 论文地址:https://arxiv.org/pdf/2411.18997 摘要 股票预测模型可以分为两个主要类别:第一类,例如GRU和ALSTM,这些模型仅基于股票…...
数字化供应链创新解决方案在零售行业的应用研究——以开源AI智能名片S2B2C商城小程序为例
摘要: 在数字化转型的浪潮中,零售行业正经历着前所未有的变革。特别是在供应链管理方面,线上线下融合、数据孤岛、消费者需求多样化等问题日益凸显,对零售企业的运营效率与市场竞争力构成了严峻挑战。本文深入探讨了零售行业供应…...
安卓Activity执行finish后onNewIntent也执行了
测试反应投屏时下一集可能播放不成功。 首先看一下日志: onCompletion onCast handlerMessage: 2 finish: PlayerActivityabc7fdc onPause: PlayerActivityabc7fdc onNewIntent: PlayerActivityabc7fdc onResume: PlayerActivityabc7fdc onPause: PlayerActivityab…...
数据结构.期末复习.学习笔记(c语言)
《数据结构》复习概要 一、概论 二、基础1. 基本概念2. 四种逻辑结构及特点3. 算法的概念、特性4. 算法设计的4个要求 三、线性结构1.顺序表2.单链表3.循环链表双向链表4.栈(后进先出)5.队列(先进先出) 四、树和二叉树1.树2.二叉…...
Kafaka安装与启动教程
1.下载 先去官网Apache Kafka可以查看到每个版本的发布时间。选择你要安装的版本。 然后进入linux建立要存放的文件夹,用wget命令下载 2.安装 先解压缩: tar -xvzf kafka_2.12-3.5.1.tgz -C ../ 3.配置文件 修改server.properties: cd .…...
根据docker file 编译镜像
比如给到一个Dockerfile 第一步编译镜像 cd /path/to/Dockerfiledocker build -t <DOCKER_IMAGE_NAME> . build 命令编译镜像 -t 镜像名字 . 指dockerfile 所在目录 如果遇到报错 [] Building 0.3s (3/3) FINISHED …...
联邦学习的 AI 大模型微调中,加性、选择性、重参数化和混合微调
联邦学习的 AI 大模型微调中,加性、选择性、重参数化和混合微调 在联邦学习的 AI 大模型微调中,加性、选择性、重参数化和混合微调是不同的操作方式,具体如下: 加性微调 定义与原理:加性微调是在原始模型的基础上添加额外的可训练参数来进行模型调整。这种方式不会改变原…...
别再盲目备考!成人高考,职场人学历提升的省时省力方案
对于CSDN上深耕技术、奔波职场的从业者来说,学历提升不必“脱产内卷”,成人高考凭借高适配性,成为多数人的首选。很多职场人担心“没时间、基础差、考不过”,而成考恰好解决了这些核心痛点,轻松实现工作学习两不误。作…...
导入SQL文件后前端仍显示旧数据怎么办_数据库查询缓存刷新
MySQL 8.0 起已彻底移除 query_cache,清缓存操作无效;前端数据陈旧主因是应用层、中间件或浏览器/CDN 缓存,需逐层排查 HTTP 响应头、Nginx proxy_cache、框架视图缓存及 Redis 缓存一致性。MySQL 的 query_cache 已被移除,别白忙…...
Spring Boot 中 @Autowired、构造器注入、@Mapper 的本质区别(一次讲透)
一、写在前面很多刚接触 Spring Boot 的同学,都会有这些疑问:为什么有的地方用 Autowired?为什么现在又推荐“构造器注入”?Mapper 到底是干嘛的?为什么没有实现类也能用?Controller / Service / Mapper 的…...
批量归一化基础:让模型训练更稳定
文章目录前言一、没BN的深度学习有多难?先懂痛点再学技术1.1 内部协变量偏移:网络每层都在“乱变”1.2 梯度消失与爆炸:深层网络的“拦路虎”1.3 调参难如登天:对初始化和学习率极度敏感二、批量归一化到底是什么?一句…...
Spring with AI (): 定制对话——Prompt模板引入
从 UI 工程师到 AI 应用架构者 13 年前,我的工作是让按钮在 IE6 上对齐; 13 年后,我用 fetch-event-source 订阅大模型的“思维流”,用 OCR 解锁图片中的文字——前端,正在成为 AI 产品的第一道体验防线。 最近&#x…...
Matlab实战:sensorArrayAnalyzer工具箱在传感器阵列设计与分析中的应用
1. 从零开始认识sensorArrayAnalyzer工具箱 第一次听说Matlab的sensorArrayAnalyzer工具箱时,我正在做一个智能音箱的麦克风阵列优化项目。当时团队纠结于阵列参数的选择,直到我发现这个神器——它把晦涩的阵列理论变成了可视化的交互操作。简单来说&…...
告别U盘!手把手教你用NFS在IMX6ULL开发板和Ubuntu虚拟机间共享驱动代码
告别U盘!手把手教你用NFS在IMX6ULL开发板和Ubuntu虚拟机间共享驱动代码 嵌入式Linux驱动开发过程中,频繁在开发环境和目标板之间传输文件是每个工程师的日常。传统U盘拷贝或手动传输不仅效率低下,还容易打断开发节奏。本文将带你用NFS&#x…...
Three.js动画效果
<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>Three.js 建模鼻祖点线面全息投影</title><style>body { margin: 0; overflow: hidden; background: #000; }#ui {position: absolute;…...
嵌入式系统事件控制与连续处理架构设计
1. 嵌入式系统的事件控制连续处理架构解析 在工业自动化领域,嵌入式系统需要同时应对两种截然不同的处理需求:一方面要持续不断地处理传感器采集的实时数据流,另一方面又必须及时响应各种异步事件(如用户指令、设备状态变化等&…...
Solon AI v3.13 发布(智能体开发框架,支持 Java8 到 Java26)
Solon AI Solon AI 是一款面向 Java 开发者 的全栈智能体(Agent)应用开发框架。它秉承 Solon 家族一贯的“克制、高效、开放”理念,向上抽象统一接口屏蔽模型差异,向下深度集成向量库、MCP 协议与复杂流控制。 核心理念…...
