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

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

news 2025/7/12 13:11:10

一. 需求描述

二. 解决思路

三. 代码实现

四. 效果展示

一. 需求描述

如下图所示，新增人员页面，有字段"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" prop="xxx"><!--v-model绑定值，如果表单z上为:model="person"，内部有多个属性如name,age...--><!--则当前输入框是什么值，就绑定对应的值--><el-input v-model="person.xxx" /></el-form-item></el-col></el-row>
</el-form>

其次第二步：编写字段必填校验规则；

必填校验的方法常用的有以下两种

第一种：也是上面提到的，写在统一的父表单校验规则对象中，然后使用对象.属性校验的方式将校验规则绑定到对应的字段；如下代码所示

return {formRules:{userName: { required: true, message: this.$t('common.required') }, // 用户名email: [{ required: true, message: this.$t('common.required') }, { validator: validateEmail }], // 邮箱tlOrEffectDate: { required: true, message: this.$t('common.required') }, // TL OR生效......}
}

第二种：在 Vue 的 data 或 computed 中定义规则，这种通常使用函数，函数返回值为必填属性了如下代码所示

computed: {tlOrEffectDateRule() {// 代码逻辑,各种计算,得出字段必填属性return ......}
}

最后第三步：将字段必填校验规则绑定在 Vue 代码字段上；

这一步是最简单的，完成第一步或第二步，只需要将定义好的属性或函数绑定到对应的字段即可；如下代码所示

// 第一种方案绑定字段属性
<el-form-item :label="TL OR生效日" :rules="formRules.tlOrEffectDate" prop="tlOrEffectDate"><el-date-pickerv-model="personnel.tlOrEffectDate" />
</el-form-item>// 第二种方案绑定字段属性
<el-form-item :label="TL OR生效日" :rules="tlOrEffectDateRule" prop="tlOrEffectDate"><el-date-pickerv-model="personnel.tlOrEffectDate" />
</el-form-item>

三. 代码实现

<!-- LeaderDS-->
<el-row><el-col v-if="this.personnel.personTypeId === 'DS'" :span="12"><el-form-item  :label="$t('personnel.newstaff.tlManager')" prop="tlManager"><code-searchv-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-searchref="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-pickerv-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 值为空,非必填,返回空数组.表示：无校验规则 => 不显示星号}
},