el-form-item多级选择性校验

671 阅读1分钟

问题:一级环境,二级环境必填,三级环境名称根据二级环境是否选择其它做选择性判断是否必填

前端代码

<el-form-item label="用户环境:" required>
  <div>
    <div class="el-form-scenne">
      <el-form-item prop="first">
        <el-select
          v-model="form.first"
          style="width:200px;"
          @change="changeFirst"
          placeholder="请选择一级环境"
          filterable
        >
          <el-option
            v-for="item in firstList"
            :key="item.id"
            :value="parseInt(item.id)"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div class="el-form-scenne">
      <el-form-item prop="second">
        <el-select
          v-model="form.second"
          style="width:200px;"
          @change="changeSecond"
          placeholder="请选择二级环境"
          filterable
          :disabled="!form.first"
        >
          <el-option
            v-for="item in secondList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div class="el-form-scenne">
      <el-form-item prop="third">
        <el-input
          v-model="form.third"
          style="width:200px;"
          placeholder="请输入三级环境名称"
        ></el-input>
      </el-form-item>
    </div>
  </div>
</el-form-item>

注意点:

1,el-form标签需要加required
2,el-form-item 里面套el-form-item,做嵌套,嵌套el-form-item需要加上prop属性值
校验规则:

first: [{ required: true, message: '请选择一级环境', trigger: 'change' }],
second: [{ required: true, message: '请选择二级环境', trigger: 'change' }],
third: [{ validator: validatorThird, trigger: 'blur' }],

validatorThird方法:

let validatorThird = (rule, value, callback) => {
  if (!!this.form.second) {
    let val =
      this.secondList && this.secondList.length > 0
        ? this.secondList.find(item => item.id === this.form.second)
        : '';
    if ((val.name === '其它' || val.name === '其他') && !value) {
      callback(new Error('请输入三级环境名称'));
    } else {
      callback();
    }
  } else callback();
};