Form-Model 使用总结

一、 代码实例

        <a-form-model
          :model="formDataModel"
          :rules="rules"
          ref="ruleForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="班级id" prop="id" style="display: none">
            <a-input v-model="formDataModel.id"></a-input>
          </a-form-model-item>
          
          <a-form-model-item label="选择学期" prop="semester">
            <a-select v-model="formDataModel.semester" placeholder="请选择单元">
              <a-select-option value="1"> 第一单元 </a-select-option>
              <a-select-option value="2"> 第二单元 </a-select-option>
              <a-select-option value="3"> 第三单元 </a-select-option>
              <a-select-option value="4"> 第四单元 </a-select-option>
            </a-select>
          </a-form-model-item>
          
         <a-form-model-item label="选择班级" prop="groupId">
            <a-select v-model="formDataModel.groupId" placeholder="请选择单元">
              <a-select-option
                v-for="group in groupList"
                :key="group.groupId"
                :value="group.groupId"
              >{{ group.groupName }}
              </a-select-option></a-select
            >
          </a-form-model-item>
          
          <a-form-model-item :wrapper-col="{ span: 16, offset: 4 }">
            <a-button type="primary" @click="onSubmit" style="width: 100%"> 查询 </a-button>
          </a-form-model-item>
        </a-form-model>
        
        
  <script>
  import request from '@/utils/request'
  export default {
    data () {
      return {
        groupList: undefined,
        formDataModel: {
          id:undefined,
          groupId: undefined,
          semester: undefined
        },
        rules: {
          groupId: [{ message: '请选择班级', required: true, trigger: ['change', 'blur'] }],
          semester: [{ message: '请选择单元', required: true, trigger: ['change', 'blur'], whitespace: true }]
        },
        labelCol: { span: 4 },
        wrapperCol: { span: 16 },
        cognitiveEngagement: 0,
        behavioralEngagement: 0
      }
    },
    mounted () {
      // 页面加载时执行的函数
      this.getGroupList()
    },
    methods: {
      getGroupList () {
        request.get('/student-group/getStudentGroupVO').then((data) => {
          this.groupList = data
        })
      },
      onSubmit () {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            request
              .post('/student-group/getStudentEvaluateVO', {
                ...this.formDataModel
              })
              .then((data) => {
                this.cognitiveEngagement = data.cognitiveEngagement * 100
                this.behavioralEngagement = data.behavioralEngagement * 100
                this.$message.success('查询成功')
              })
          } else {
            // 验证失败执行的操作
            console.log('error submit!!')
            return false
          }
        })
      },
      onClose () {
        this.$refs.ruleForm.resetFields()
      }
    }
  }
</script>

二、 易错点注释

1.   :model="formDataModel"  formDataModel对应着表单中的每一个元素在后台中传递的值，使用之前在 data 中定义。
2.   :rules="rules" 对应着表单验证的规则，在data rules 中对每一个元素一一对应。
3.   ref="ruleForm" 在表单点击 【提交】和 【取消】按钮时。作为验证的关键字进行使用。
4.   :label-col="labelCol"  :wrapper-col="wrapperCol" ：  作为表格的布局
5.    <a-form-model-item label="班级id" prop="id" style="display: none">
        <a-input v-model="formDataModel.id"></a-input>
      </a-form-model-item>
      
      [prop] 作为rule 认证的关键字，与 data 中[rules]内容一一对应。
       v-model 中内容与 data中表单上的 formDataModel中各元素一一对应。