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('') + 'ID'">
            <!-- v-decorator="[
                  'deviceId',
                  {
                    rules: [{ required: false, message: $t('') + $t('') }],
                  },
            ]"-->
            <a-input
              v-model=""
              :placeholder=" $t('') + $t('')"
            />
          </a-form-item>

 定义form

form: this.$(this),

提交数据，表单验证

      ((err, values) => {
        if (!err) {
  
        }
      })

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

        ()
          ()
          ({
            name: ,
            age: 
          })
         

 获取表单内容

();
('name')

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

 ()
           = ({}, )
          this.$nextTick(() => {
            (pick(, ',name', 'age'))
          })

有的时候可能会报错：

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

---

二、a-form-model

组件使用

          <a-form-model ref="ruleForm" :model="form" :rules="rules" :layout="">
            <a-form-model-item :label="$t('') + $t('')" prop="name">
              <a-input v-model="" :placeholder="$t('') + $t('')" />
            </a-form-model-item>
            <a-form-model-item :label="$t('') + $t('')" prop="address">
              <input
                style="height:15px"
                v-model=""
                
                :placeholder="$t('') + $t('')"
              />
            </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.$(valid => {
        if (valid) {
          alert('submit!');
        } else {
          ('error submit!!');
          return false;
        }
      });
    },

重置

    resetForm() {
      this.$();
    },

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

---

发表一下个人看法

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