news 2026/7/17 16:23:00

Vue + Element UI 实现选框联动动态控制选框必填

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Vue + Element UI 实现选框联动动态控制选框必填

目录

一. 需求描述

二. 解决思路

三. 代码实现

四. 效果展示

一. 需求描述

如下图所示，新增人员页面，有字段"Leader DS"和"Leader DS名称"。

现在我要在字段"Leader DS"和"Leader DS名称"字段下方再添加一个新的字段叫"TL OR生效日"，并根据以下情况来判断是否必填。

情况一：若"Leader DS"和"Leader DS名称"字段值均不为空，则新增字段"TL OR生效日"设置为必填；

情况二：若"Leader DS"和"Leader DS名称"字段值为空，则新增字段"TL OR生效日"设置为非必填；

二. 解决思路

既然我们使用了 Vue + Element UI的框架，相对来讲就比较容易了；

第一步：编写 "TL OR生效日" 字段的 Vue 代码；

注解使用 Element UI 的组件库，组件的使用方法和代码如下

// el-form 表单标签(表单容器) // ref="xxx": 注册表单引用，用于通过 this.$refs.xxx 访问表单方法（如验证提交） // :model="xxx": 绑定表单数据对象（Vue 的 xxx 数据） // :rules="xxx"： 绑定表单验证规则对象(这里绑定的规则通常是恒定不改变的，必填就是必填，非必填就是非必填) <el-form ref="xxx" :model="xxx" :rules="xxx" label-width="200px"> // 行标签(行容器) // 作用：创建一行布局容器（基于 24 分栏的栅格系统），通常放在表单标签内部，一张表单会有很多行数据，每一对 el-row 标签就是一行 <el-row> <!--列标签(列容器)，有行就会有列，列标签必须写在行标签的内部！！！--> <!--:span="xxx"标识当前列占用的行宽度比例，上面说到了一行分为24等比例--> <!--所以如果希望一行有四列，则:span="6"；如果希望三列，则:span="8"，平分24即可，也可不平分，一列 :span="16"，另一列 :span="8"--> <el-col :span="xxx"> <!--表单项容器,item 内部就是我们来定义各种组件的地方，例如input组件，button组件等--> <!--:label="xxx" 就是当前列的标签名称--> <!--prop="xxx" 指定验证规则对应的字段名（需与 personnelRules 中的键匹配）--> <!--通常表单:rules="xxx"定义的是一个对象，对象内部就是一个个具体的字段校验规则--> <!--假设:rules="AAA"，内部定义了aaa，bbb，ccc三个字段校验，则当前prop="AAA.ccc"--> <el-form-item :label="xxx" :rules="tlOrEffectDateRules" prop="xxx"> <!--v-model绑定值，如果表单z上为:model="person"，内部有多个属性如name,age...--> <!--则当前输入框是什么值，就绑定对应的值--> <el-input v-model="person.xxx" /> </el-form-item> </el-col> </el-row> </el-form>

第二步：编写字段必填校验规则，在 Vue 的 data 或 computed 中定义规则，像这种通过监听其他字段值进而判断当下字段值规则的情况，小编个人比较推荐通过 :rules + computed 的方法来实现，所以我们在元素标签中编写 :rules 规则，即上方代码中的:rules="tlOrEffectDateRules"，tlOrEffectDateRules 函数既可以返回对象属性，也可以返回集合属性，通常情况下集合属性更具备扩展性。

// 写法一：返回{}对象标签属性 computed: { tlOrEffectDateRule() { const isRequired = this.personnel.tlManager !== null && this.personnel.tlManager !== undefined && this.personnel.tlManager.trim() !== ''; return isRequired ? { required: true, message: this.$t('common.required') } // tlManager 值不为空,必填,显示星号 : {}; // tlManager 值为空,非必填,返回空数组.表示：无校验规则 => 不显示星号 } } // 写法二：在复杂情况下，还可以返回集合[]标签属性 computed: { tlOrEffectDateRule() { const rule = [] if (this.personnel.tlManager !== null && this.personnel.tlManager !== undefined && this.personnel.tlManager.trim() !== '') { rule.push({ required: true, message: this.$t('common.required') }) } if (其它条件){ rule.push({ validator: 自定义验证方法 }) } return rule } }

三. 代码实现

<!-- LeaderDS--> <el-row> <el-col v-if="this.personnel.personTypeId === 'DS'" :span="12"> <el-form-item :label="$t('personnel.newstaff.tlManager')" prop="tlManager"> <code-search v-model="personnel.tlManager" show-code :show-name="false" code-type="Person" :other-conditions="{leaderDS: '1',personTypeId:'DS'}" @change="refFillManager('', ...arguments)"/> </el-form-item> </el-col> <el-col v-if="this.personnel.personTypeId === 'DS'" :span="12"> <el-form-item :label="$t('personnel.newstaff.tlManagerName')" prop="tlManager"> <code-search ref="tlManagerName" v-model="personnel.tlManager" code-type="Person" :other-conditions="{leaderDS: '1',personTypeId: 'DS'}" @change="refFillManager('', ...arguments)"/> </el-form-item> </el-col> </el-row> // 编写要新增的字段 TL OR生效日 值 <!-- TL OR生效日 --> <el-row> <el-col :span="12" v-if="this.personnel.personTypeId === 'DS'"> <el-form-item :label="$t('personnel.newstaff.tlOrEffectDate')" :rules="tlOrEffectDateRules" prop="tlOrEffectDate"> <el-date-picker v-model="personnel.tlOrEffectDate" value-format="yyyy-MM-dd" type="date" :placeholder="$t('personnel.newstaff.optiondate')" /> </el-form-item> </el-col> </el-row> // 初始化定义一个存储表单所有元素值的对象 const newstaffperson = { // 这里定义页面上的所有字段值，为了美观简洁，只展示上面代码中相关的字段值，其余字段省略.... tlManager: '', // TL经理 tlOrEffectDate: null, // TL OR生效日 } // 在 vue 的 return 方法中，调用调用深拷贝方法，创建另外一个独立的新的数据备份，防止响应式数据被意外修改 return { personnel: _.cloneDeep(newstaffperson), } // 在 Vue 的 data 或 computed 中定义规则，因为我们要新增的字段，必填不是固定的，而是随着其其他字段动态控制是否必填 computed: { // 定义 tlOrEffectDateRules 函数，采用动态函数计算属性的方法为其设置必填属性，将函数绑定到添加的字段"TL OR生效日"的属性:rules上 tlOrEffectDateRules() { const isRequired = this.personnel.tlManager !== null && this.personnel.tlManager.trim() !== ''; return isRequired ? { required: true, message: this.$t('common.required') } // tlManager 值不为空,必填,显示星号 : {}; // tlManager 值为空,非必填,返回空数组.表示：无校验规则 => 不显示星号 } },

四. 效果展示

OK，编写完毕代码，我们进入页面

情况一测试：如下图，我选择任意一个Leader DS，然后可以看到我添加的新字段"TL OR生效日"已经出现了星号必填；

现在我手动删除日期，可以看到已经报出必填校验了

情况二测试：如下图，我将刚才选择的"Leader DS"赋值为空值，可以看到，新添加的字段"TL OR生效日"必填星号样式也没有出现，也没有提示我们该字段必填，这就实现了根据"Leader DS"是否为空动态控制"TL OR生效日"字段是否必填。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/7/17 16:22:01

终极PS3游戏管理器IRISMAN：破解玩家的全能工具箱

终极PS3游戏管理器IRISMAN&#xff1a;破解玩家的全能工具箱 【免费下载链接】IRISMAN All-in-one backup manager for PlayStation3. Fork of Iris Manager. 项目地址: https://gitcode.com/gh_mirrors/ir/IRISMAN 还在为PS3上的游戏管理而烦恼吗&#xff1f;想轻松管理…

作者头像 李华
网站建设 2026/7/17 16:20:37

终极指南：如何用Simple HTTP Server快速部署静态网站

终极指南&#xff1a;如何用Simple HTTP Server快速部署静态网站 【免费下载链接】simple-http-server Simple http server in Rust (Windows/Mac/Linux) 项目地址: https://gitcode.com/gh_mirrors/si/simple-http-server Simple HTTP Server是一个用Rust编写的轻量级静…

作者头像 李华
网站建设 2026/7/17 16:20:11

内核死锁检测机制解析：lockdep的原理、内核配置与典型案例分析方法

内核死锁检测机制解析&#xff1a;lockdep的原理、内核配置与典型案例分析方法 一、死锁检测的必要性——为什么需要lockdep而非靠Code Review 死锁是并发编程中最令人头疼的Bug。它的触发时机不确定——可能在运行数月后才在特定的CPU调度顺序和中断嵌套下才出现。它在日志中的…

作者头像 李华
网站建设 2026/7/17 16:18:50

NUMA架构下的数据库性能优化：CPU绑核、内存交错与跨Node访问延迟

NUMA架构下的数据库性能优化&#xff1a;CPU绑核、内存交错与跨Node访问延迟 一、128核的机器跑MySQL&#xff0c;QPS为什么只有预期的一半 现代服务器普遍采用NUMA架构&#xff0c;一台典型的双路服务器有2个NUMA Node&#xff0c;每个Node拥有自己的CPU和本地内存。数据库进程…

作者头像 李华
网站建设 2026/7/17 16:16:43

MySQL查询优化器的成本模型：从统计信息到执行计划选择的内幕

MySQL查询优化器的成本模型&#xff1a;从统计信息到执行计划选择的内幕 一、InnoDB统计信息的双轨制 MySQL优化器做出执行计划决策的基础是统计信息。InnoDB提供两种统计信息模式&#xff1a;持久化统计信息&#xff08;innodb_stats_persistentON&#xff0c;默认&#xff09…

作者头像 李华