vue antd Form表单的使用

1、安装

$ npm i --save ant-design-vue

2、引入 在 main.js 文件中引入

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'

Vue.use(Antd);

3、在组件库中找到form组件，将组件代码复制到自己的文件上 

https://www.antdv.com/components/form-cn/    <-- 组件地址

4、使用form表单时 v-decorator 相当于 v-model,所以使用  v-decorator 时不能使用v-model

<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
    <a-form-item label="Note">
      <a-input
        v-decorator="['note', //value名字 例如:v-model="note"
                         { rules: [
                            { required: true,// 是否必填 true必填 false不必填
                              message: 'Please input your note!' //触发限制时的提示
                             }
                           ] 
                          }
                     ]"
      />
    </a-form-item>
  </a-form>

<!-- --------------------------------------------------------------------------------- -->
<script>
export default {
  data() {
    return {
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
  methods: {
   }
};
</script>

5、获取表单的内容，并做限制

methods: {
    handleSubmit(e) {
      e.preventDefault(); //阻止默认操作
      this.form.validateFields((err, values) => { //获取表单的值
        if (!err) {
         console.log(values) //values是表单里面所有值的集合，使用方法 例如 values.note
        }
      });
    },
  },

6、获取表单内容，不做限制，单纯获取

methods: {
    handleSubmit(e) {
      e.preventDefault(); //阻止默认操作
      const values=this.form.getFieldsValue() //values是表单里面所有值的集合，使用方法 例如 values.note
    },
  },

7、清空表单

this.form.resetFields();//在点击 清空或重置按钮时调用的函数中使用

8、修改表单内容

this.form.setFieldsValue({
    note:"大可爱"
})

9、默认内容 表单中默认的value值用 initialValue 设置

<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
    <a-form-item label="Note">
      <a-input
        v-decorator="['note', //value名字 例如:v-model="note"
                         { rules: [
                            { required: true,// 是否必填 true必填 false不必填
                              message: 'Please input your note!' //触发限制时的提示
                             }
                           ] ，
                           initialValue:"3333" //默认value值
                          }
                     ]"
      />
    </a-form-item>
  </a-form>