ant design of vue form表单使用

1,.表单布局部分
通过a-row（表示行） 默认gutter为8,
a-col（表示列）
sm >= 576px，md >= 768px，lg >=992px，xl >= 1200px，xxl >= 1600px

       <a-form
        layout="horizontal"
        :form="searchForm"
        :labelCol="{ span: 5 }"
        :wrapperCol="{ span: 16, offset: 1 }"
      >
        <a-row :gutter="8">
          <a-col :md="6" :sm="24">
            <a-form-item
              :labelCol="{ span: 8 }"
              :wrapperCol="{ span: 18 }"
              labelAlign="left"
            >
              <a-input
                v-decorator="[
                  'keyword',
                  {
                    rules: [{ required: false, message: '请输入关键字搜索' }],
                  },
                ]"
                placeholder="请输入关键字搜索"
                class="item-input"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="设备厂商">
              <a-select
                class="item-input"
                :allowClear="true"
                placeholder="请选择设备厂商"
                v-decorator="[
                  'Equipment',
                  { rules: [{ required: false, message: '请选择设备厂商' }] },
                ]"
              >
                <a-select-option
                  v-for="(stateItem, stateIndex) in equipmentList"
                  :key="'stateItem' + stateIndex"
                  :value="stateItem.id"
                >
                  {{ stateItem.manufacturesName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="测站类型">
              <a-select
                class="item-input"
                :allowClear="true"
                placeholder="请选择测站类型"
                v-decorator="[
                  'StationType',
                  { rules: [{ required: false, message: '请选择测站类型' }] },
                ]"
              >
                <a-select-option
                  v-for="(stateItem, stateIndex) in testList"
                  :key="'stateItem' + stateIndex"
                  :value="stateItem.code"
                >
                  {{ stateItem.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <span style="display: inline-block; margin-top: 3px">
              <a-button
                type="primary"
                icon="search"
                class="item-btn"
                style="background: #108ee9"
                @click="queryGroup"
                >搜索</a-button
              >
              <a-button icon="sync" @click="ResetGroup"> 重置 </a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>

2. 创建表单
   Form.create(options) | this.$form.createForm(this, options)

3. 通过 v-decorator 绑定字段

4. getFieldsError 获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error

5.validateFields 表单校验
校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件

6.resetFields 重置表单的值

7.this.form.getFieldValue(‘字段’),获取表单字段中的值

8.setFieldsValue 设置表单的回限值 设置一组输入控件的值

其他待续…