如何实现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 大模型微调中,加性、选择性、重参数化和混合微调是不同的操作方式,具体如下: 加性微调 定义与原理:加性微调是在原始模型的基础上添加额外的可训练参数来进行模型调整。这种方式不会改变原…...
Qwen3-TTS开源语音模型快速上手指南:97ms低延迟流式生成实操
Qwen3-TTS开源语音模型快速上手指南:97ms低延迟流式生成实操 本文介绍如何快速上手Qwen3-TTS语音合成模型,重点演示其97ms超低延迟的流式生成能力,让你在10分钟内掌握从安装到实际使用的完整流程。 1. 环境准备与快速部署 Qwen3-TTS是一个强…...
洛雪音乐助手:一个界面,全网音乐,你的终极免费播放器解决方案
洛雪音乐助手:一个界面,全网音乐,你的终极免费播放器解决方案 【免费下载链接】lx-music-desktop 一个基于 Electron 的音乐软件 项目地址: https://gitcode.com/GitHub_Trending/lx/lx-music-desktop 你是否曾为了找一首歌在多个音乐…...
WarcraftHelper:让经典魔兽争霸3在现代电脑上重获新生
WarcraftHelper:让经典魔兽争霸3在现代电脑上重获新生 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 你是否还记得第一次进入艾泽拉斯大陆…...
2026企业文档选型白皮书:功能、技术栈、私有化部署与采购建议
核心结论:企业文档工具市场年复合增长率达46.7%。对于有数据安全、二次开发需求的企业,支持私有化部署源码开放的方案(如JVS企业文档)已成为技术团队的优先选择。本文基于11款主流产品深度评测,提供功能对比矩阵、技术…...
MusePublic圣光艺苑完整指南:CSDN图床集成+真迹分享链接生成机制
MusePublic圣光艺苑完整指南:CSDN图床集成真迹分享链接生成机制 1. 引言:当古典艺术遇见现代技术 想象一下,你走进一间19世纪的画室,空气中弥漫着亚麻籽油和矿物颜料的味道。阳光透过高窗,洒在铺着亚麻画布的画架上。…...
从新手到高手:解锁SCI/EI文献的五大高效获取路径
1. 科研新手的第一站:认识SCI/EI文献 刚踏入科研大门时,我最头疼的就是找文献。记得第一次导师让我"查几篇相关文献",我在电脑前手足无措地坐了两个小时,最后只找到两篇勉强相关的文章。后来才知道,90%的科研…...
Vue 3 中集成 Three.js 场景的完整实践指南
本文详解如何在 vue 3(javascript 版本)项目中正确集成 three.js 基础场景,涵盖 dom 挂载、生命周期协调、渲染循环管理及常见陷阱规避。 本文详解如何在 vue 3(javascript 版本)项目中正确集成 three.js 基础场景…...
3分钟快速安装Figma中文界面插件:设计师必备的免费汉化工具
3分钟快速安装Figma中文界面插件:设计师必备的免费汉化工具 【免费下载链接】figmaCN 中文 Figma 插件,设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN 你是否因为Figma的英文界面而感到困扰?专业术语看不懂…...
django-fsm部署指南:生产环境配置和性能调优
django-fsm部署指南:生产环境配置和性能调优 【免费下载链接】django-fsm Django friendly finite state machine support 项目地址: https://gitcode.com/gh_mirrors/dj/django-fsm django-fsm是一个为Django应用提供友好有限状态机支持的工具,能…...
终极指南:Switch NAND管理工具NxNandManager的10个核心功能解析
终极指南:Switch NAND管理工具NxNandManager的10个核心功能解析 【免费下载链接】NxNandManager Nintendo Switch NAND management tool : explore, backup, restore, mount, resize, create emunand, etc. (Windows) 项目地址: https://gitcode.com/gh_mirrors/n…...
