elementui表单item中包含多个必填项

代码

<el-form-item label="城市：" class="cityList" prop="selectProValue">
  <!-- 城市 -->
  <el-select v-model="form.selectProValue" placeholder="请选择" @change="proValueChange">
    <el-option v-for="(province, index) in provinceList" :key="index" :label="province" :value="province"></el-option>
  </el-select>
  <!-- 城市下地区 -->
  <el-select v-model="form.selectCityValue" placeholder="请选择" @change="onCityRules">
    <el-option v-for="(city, index) in cityList" :key="index" :label="city" :value="city"></el-option>
  </el-select>
</el-form-item>

验证规则方法：

item中给其中一个下拉框字段添加验证规则，通过自定义validator验证规则 校验这个字段，在自定义校验规则中，对第二个必填项进行校验，两个必填项必须都要通过。

 data(){
    // 自定义城市验证规则
    varcityRule = (rule, value, callback) => {
      // value 就是 验证那个字段 为空 或者 selectCityValue 为空 验证都不会通过
      if (value === '' || this.form.selectCityValue === '') {
        returncallback(newError('请选择地区！'))
      } else { callback() }
    }
  }
  return {
    // 城市地区验证规则 只需要添加第一个字段的验证规则
    formRules: {
      selectProValue: [{ required: true, validator: cityRule, trigger: 'chang    ·e' }]
    }
  }