<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
 <el-form-item label="用戶名" prop="name">
   <el-input v-model="ruleForm.name"></el-input>
 </el-form-item>
 <el-form-item label="用戶類型" prop="type">
   <el-select v-model="ruleForm.type" placeholder="請(qǐng)選擇專利類型" style="width:500px;">
 <el-option label="一級(jí)管理員" value="1"></el-option>
 <el-option label="二級(jí)管理員" value="2"></el-option>
 <el-option label="三級(jí)管理員" value="3"></el-option>
 <el-option label="普通用戶" value="4"></el-option>
   </el-select>
 </el-form-item>
 <el-form-item label="出生日期" prop="date">
   <el-input v-model="ruleForm.date"></el-input>
 </el-form-item>
 <el-form-item label="備注" prop="intro">
   <el-input type="textarea" v-model="ruleForm.intro" :rows="10"></el-input>
 </el-form-item>
 <el-form-item>
   <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
 </el-form-item>
</el-form>

data() {
   return {
    ruleForm: {
       name: '',
       type: '',
       date: '',
       intro: '',
     }
   }
 rules: {
     name: [
      { required: true, message: '請(qǐng)輸入用戶名', trigger: 'blur' },
      { min: 1, max: 20, message: '長(zhǎng)度在 1 到20個(gè)字符', trigger: 'blur' }
     ],
     type: [
      { required: true, message: '請(qǐng)選擇用戶類型', trigger: 'change' }
     ],
     date: [
      { required: true, message: '請(qǐng)輸入出生日期', trigger: 'blur' },
      { min: 1, max: 100, message: '長(zhǎng)度在 1 到 100 個(gè)字符', trigger: 'blur' }
     ],
     intro: [
      { required: true, message: '請(qǐng)輸入備注', trigger: 'blur' },
      { min: 50, max: 500, message: '請(qǐng)輸入至少50個(gè)字', trigger: 'blur' }
     ],
    }
}

methods:{
submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
      this.$http.get(baseURL+"api/create?table=user&"+getParamsString(param)).then(function(res){
            if(res.body==1){
              this.$alert("提交成功", '提交結(jié)果', {
                confirmButtonText: '確定',
                type: 'success',
                callback: action => {
                },
              });
            }
            else{
              this.$alert("提交失敗", '提交結(jié)果', {
                confirmButtonText: '確定',
                type: 'warning',
                callback: action => {
                },
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
}

methods:{
  showDetails:function(){
    this.$http.get(baseURL+"api/條件").then(function(res){
      this.msg = res.body;
    });
  }
}

mounted: function (){
   this.showDetails();
}