Ant-Design-Vue中关于Form组件的使用

1.创建form表单的两种方式，不同的方式在js中创建表单的方式也不同

---

 

方式1：一般使用在搜索表单中，只需要双向绑定数据即可，那就使用这种方法即可

 

<template>
  <a-form >
    <a-form-item label="Note" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-input v-model="queryParam.note"></a-input>
    </a-form-item>
    <a-form-item label="mark" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-input v-model="queryParam.mark"></a-input>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit" @click="handleSubmit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  export default {
    name: 'TestForm',
    data () {
      return {
        queryParam:{
          note:'',
          mark:''
        }
      }
    },
    methods: {
      handleSubmit () {
        console.log(this.queryParam)
      }
    }
  }
</script>

View Code