ant a-form/a-form-model用法(组件使用、表单验证、数据收集、数据重置、数据提交)

一、a-form

 组件使用

    <a-form
      :form="form"
      layout="vertical"
      :label-col="{span: 6}"
      :wrapper-col="{span: 17,offset:1}"
    ></a-form>

 绑定数据

<a-form-item :label="$t('m.equipment') + 'ID'">
            <!-- v-decorator="[
                  'deviceId',
                  {
                    rules: [{ required: false, message: $t('m.PleaseEnter') + $t('m.deviceId') }],
                  },
            ]"-->
            <a-input
              v-model="queryParam.deviceId"
              :placeholder=" $t('m.PleaseEnter') + $t('m.deviceId')"
            />
          </a-form-item>

 定义form

form: this.$form.createForm(this),

提交数据，表单验证

      this.form.validateFields((err, values) => {
        if (!err) {
  
        }
      })

 打开表单时，内容重置 / 单个设置表单内容

        this.form.resetFields()
          this.form.setFieldsValue()
          this.form.setFieldsValue({
            name: this.data.name,
            age: this.data.age
          })
         

 获取表单内容

this.form.getFieldsValue();
this.form.getFieldValue('name')

打开表单后，将整条数据对应填写到表单

 this.form.resetFields()
          this.model = Object.assign({}, this.record)
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model, ',name', 'age'))
          })

有的时候可能会报错：

报错的话加一下this.$nextTick(()=>{}) 

---

二、a-form-model

组件使用

          <a-form-model ref="ruleForm" :model="form" :rules="rules" :layout="form.layout">
            <a-form-model-item :label="$t('m.electronicFence') + $t('m.name')" prop="name">
              <a-input v-model="form.name" :placeholder="$t('m.electronicFence') + $t('m.name')" />
            </a-form-model-item>
            <a-form-model-item :label="$t('m.yaddress') + $t('m.search')" prop="address">
              <input
                style="height:15px"
                v-model="form.address"
                id="tipinput"
                :placeholder="$t('m.electronicFence') + $t('m.yaddress')"
              />
            </a-form-model-item>
            <a-form-model-item>
              <a-button @click="openPloy()" style="margin-bottom: 5px;margin-left:20px">编辑当前区域</a-button>
              <a-button style="margin-left:20px" @click="delArea()">删除当前区域</a-button>
            </a-form-model-item>
          </a-form-model>

data:

      form: {
        name: '',
        address: undefined,
        layout: 'inline'
      },
      rules: {
        name: [{ required: true, message: `请输入电子围栏名称`, trigger: 'blur' }],
        address: [{ required: true, message: `请选择地址`, trigger: 'blur' }]
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },

提交

onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

重置

    resetForm() {
      this.$refs.ruleForm.resetFields();
    },

 至于修改、获取form中绑定的值，直接this.form就好了

---

发表一下个人看法

本人认为第二种方法比第一种简单的多，使用也很方便。