vue中element-ui实现表单根据不同下拉框进行动态表单校验

vue中element-ui实现表单根据不同下拉框进行动态表单校验

我们想实现的功能如下，请看效果：

话不多说我们上代码

html部分：

   <el-form :model="formInline"
                 ref="formInline"
                 :inline="true"
                 :rules="rules"
                 style="width: 600px;">
          <el-form-item label="数据库类型:"
                        prop="dbtype"
                        :label-width="formLabelWidth">
            <el-select v-model="formInline.dbtype"
                       @change="onChangeMoudle">
              <el-option label="Oracle"
                         value='Oracle'></el-option>
              <el-option label="MySQL"
                         value='MySQL'></el-option>
              <el-option label="informix"
                         value='informix'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据库服务名:"
                        prop="servername"
                        :label-width="formLabelWidth">
            <el-input v-model="formInline.servername"></el-input>
          </el-form-item>
          <el-form-item label="数据库名:"
                        prop="database"
                        :label-width="formLabelWidth">
            <el-input v-model="formInline.database"></el-input>
          </el-form-item>
         
        </el-form>

js部分：

<script>
//定义根据下拉选项进行的的单独交验的表单项
let servername = [
  { required: true, message: '该数据库类型下此项为必填项', trigger: 'blur' },
];
let database = [
  { required: true, message: '该数据库类型下此项为必填项', trigger: 'blur' }
];
export default {
  data () {
    return {
      rules: {
      
        dbtype: [
          { required: true, message: '请选择数据库类型', trigger: 'change' }
        ],
        servername: [{ trigger: 'blur' }],
        database: [{ trigger: 'blur' }],
      },
    }
    },
     //根据选择不同的下拉框的值，来进行动态校验
  watch: {
    "formInline.dbtype": function (val) {
      this.val = val
      if (val == 'Oracle') {
        console.log(222)
        Object.assign(this.rules, {
          servername,
          database: [],
        });
        setTimeout(() => { // 添加事件队列
           this.$refs.formInline.validateField(["servername"]);
          this.$refs.formInline.clearValidate(["database"]);
        }, 0);
      }
      else if (val == 'MySQL') {
        Object.assign(this.rules, {
          database,
          servername: []
        });

        setTimeout(() => { // 添加事件队列
         this.$refs.formInline.validateField(["database"]);
          this.$refs.formInline.clearValidate(["servername"]);
        }, 0);
      }
      else if (val == 'informix') {
        Object.assign(this.rules, {
          database,
          servername
        });

        setTimeout(() => { // 添加事件队列很重要
         //this.$refs.formInline.validateField(["mysqlName"]);
         this.$refs.formInline.validateField(["servername", "database"]);
        }, 0);
      }
    }
  },
    }
</script>

以上是选中下拉不同值时即可进行校验是否必填的方法。还有一种是不即刻进行校验，提交表单时进行校验。按具体需求来实现吧，