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" 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-picker
    v-model="personnel.tlOrEffectDate" />
</el-form-item>

// 第二种方案绑定字段属性
<el-form-item :label="TL OR生效日" :rules="tlOrEffectDateRule" prop="tlOrEffectDate">
  <el-date-picker
    v-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-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生效日"字段是否必填。