当前位置：首页 > news >正文

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

news 2026/7/17 16:23:19

一. 需求描述

二. 解决思路

三. 代码实现

四. 效果展示

一. 需求描述

如下图所示，新增人员页面，有字段"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 值为空,非必填,返回空数组.表示：无校验规则 => 不显示星号 } },