Ant Design Vue-Form 学习 --持续更新

Ant Design Vue

Form 表单

表单填写在日常工作中收录信息比较常用，
antd 中 form 用于创建一个实体收集信息，并且可以对输入的数据类型进行校验。

1. 表单排列

这里指的是 表单的标签和控件的排列方式

• 水平
• 垂直
• 行内

2. 表单域

表单·一定会·包含表单域， 表单域 可以是

• 输入控件
• 标签
• 下拉菜单
• 文本域等等
  antd 封装了表单域 <Form.item />

注意点
1、如果使用 Form.create 处理表单使其具有自动收集数据并校验的功能，建议使用jsx。<.jsx>https://typescript.bootcss.com/jsx.html

• 我不熟悉jsx语法，所以使用 template 方式使用form

2、如果不是使用Vue.use(Form)形式注册的Form组件，你需要自行在main.js文件中将$form挂载到Vue原型上。Vue.prototype.$form = Form

3. 使用

<template>
  <a-form :form="form">
    <a-form-item label="Note">
      <a-input 
      v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
      >
    </a-form-item>
  </a-form>
</template>

4.apis 释义

Form

1. :form=“form”

动态数据绑定，这个没啥说的，但是这里需要注意的data中的form的创建形式

• 直接指定一个Object对象{}
• 使用Form.create来创建
  • jsx方式 自己不熟悉，不用
  • template 方式使用。

我们先来说第二种，官方用的最多,上代码

///.....vue 实例
  data() {
   
    return {
   
      form: this.$form.createForm(this, {
    name: 'coordinated' }),
    };
  },
//...

- form -官方文档

form 经 Form.create() 包装过的组件会自带 this.form 属性，如果使用 template 语法，可以使用 this.$form.createForm(this, options) 类型是 object 默认参数 无

- form -我的理解

• data中的form 是一个经过antd($form.create)方法包装过的属性

• 参数中的this 是 组件实例本身 与 其他配置中的this一样使用

  • Form.create(options) | this.$form.createForm(this, options)

  <template>
    <a-form :form="form" />
  </template>
  <script>
    export default {
       
      beforeCreate() {
       
        this.form =