目录一. 需求描述二. 解决思路三. 代码实现四. 效果展示一. 需求描述如下图所示新增人员页面有字段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 表单标签(表单容器) // refxxx: 注册表单引用用于通过 this.$refs.xxx 访问表单方法如验证提交 // :modelxxx: 绑定表单数据对象Vue 的 xxx 数据 // :rulesxxx 绑定表单验证规则对象(这里绑定的规则通常是恒定不改变的必填就是必填非必填就是非必填) el-form refxxx :modelxxx :rulesxxx label-width200px // 行标签(行容器) // 作用创建一行布局容器基于 24 分栏的栅格系统通常放在表单标签内部一张表单会有很多行数据每一对 el-row 标签就是一行 el-row !--列标签(列容器)有行就会有列列标签必须写在行标签的内部-- !--:spanxxx标识当前列占用的行宽度比例上面说到了一行分为24等比例-- !--所以如果希望一行有四列则:span6如果希望三列则:span8平分24即可也可不平分一列 :span16另一列 :span8-- el-col :spanxxx !--表单项容器,item 内部就是我们来定义各种组件的地方例如input组件button组件等-- !--:labelxxx 就是当前列的标签名称-- !--propxxx 指定验证规则对应的字段名需与 personnelRules 中的键匹配-- !--通常表单:rulesxxx定义的是一个对象对象内部就是一个个具体的字段校验规则-- !--假设:rulesAAA内部定义了aaabbbccc三个字段校验则当前propAAA.ccc-- el-form-item :labelxxx :rulestlOrEffectDateRules propxxx !--v-model绑定值如果表单z上为:modelperson内部有多个属性如name,age...-- !--则当前输入框是什么值就绑定对应的值-- el-input v-modelperson.xxx / /el-form-item /el-col /el-row /el-form第二步编写字段必填校验规则在 Vue 的 data 或 computed 中定义规则像这种通过监听其他字段值进而判断当下字段值规则的情况小编个人比较推荐通过 :rules computed 的方法来实现所以我们在元素标签中编写 :rules 规则即上方代码中的:rulestlOrEffectDateRulestlOrEffectDateRules 函数既可以返回对象属性也可以返回集合属性通常情况下集合属性更具备扩展性。// 写法一返回{}对象标签属性 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-ifthis.personnel.personTypeId DS :span12 el-form-item :label$t(personnel.newstaff.tlManager) proptlManager code-search v-modelpersonnel.tlManager show-code :show-namefalse code-typePerson :other-conditions{leaderDS: 1,personTypeId:DS} changerefFillManager(, ...arguments)/ /el-form-item /el-col el-col v-ifthis.personnel.personTypeId DS :span12 el-form-item :label$t(personnel.newstaff.tlManagerName) proptlManager code-search reftlManagerName v-modelpersonnel.tlManager code-typePerson :other-conditions{leaderDS: 1,personTypeId: DS} changerefFillManager(, ...arguments)/ /el-form-item /el-col /el-row // 编写要新增的字段 TL OR生效日 值 !-- TL OR生效日 -- el-row el-col :span12 v-ifthis.personnel.personTypeId DS el-form-item :label$t(personnel.newstaff.tlOrEffectDate) :rulestlOrEffectDateRules proptlOrEffectDate el-date-picker v-modelpersonnel.tlOrEffectDate value-formatyyyy-MM-dd typedate :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生效日字段是否必填。