Ant Design Vue给a-form表单赋值及获取表单数据

痛定思痛。 2022-11-30 12:48 753阅读 0赞

这里先说一下v-decorator指令：

## v-decorator ##

下面是form表单内的文本输入框，使用了v-decorate进行数据绑定：

<a-input placeholder="请输入名称" v-decorator="['name', { rules: [{ required: true, message: '请输入名称!' }] }]"></a-input>

这个是v-decorate的用法，类似于v-model，但是v-decorator可以更方便的添加校验，必填项等；v-model可以更方便地获取值以及设置值，这个是二者在开发时最明显的区别（其他的我暂时没发现）。

这里是主要讲v-decorator，因为表单内使用这个指令。

## form ##

使用表单有最重要的一点：就是表单a-form需要使用this.form属性，就必须进行包装，如下图：

![20200824164026543.png][]

这个是官网API给的用法。

所以，在使用时要添加：

<a-form layout="inline" :form="form">
    	<a-form-item label="名称:">
    	  <a-input placeholder="请输入名称" v-decorator="['name', { rules: [{ required: true, message: '请输入名称!' }] }]"></a-input>
    	</a-form-item>
    </a-form>

这里使用的template语法，form必须在data内定义：

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

这是表单的设置。

## form设置值 ##

当对form值进行定义后，后面就可以使用this.form来获取表单内的东西了。

习惯在表单设置值前添加：this.form.resetFields();

设置值的方式是：this.form.setFieldsValue();

方式一：

然后进行设置值：

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

这里的name就是上述a-input标签内的name属性。这种方法适合参数少的情况。

方式二（个人更喜欢这种，因为参数真的不少T\_T）：

需要先在data内定义  model: \{\} 对象，后面使用model设置，而且需要导入lodash的pick函数：

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

这里的 [Object.assign()][Object.assign]等于是深拷贝赋值对象，record是我拿到的需要设置进文本框的值，这里的pick参考[lodash的pick][lodash_pick]。

重点是这几个，[this.$nextTick][this._nextTick]可以看这篇。

这个方式等于是将值统一放在 model这个对象内，然后将你需要设置进去的值，通过pick从this.model内选择得到，最后通过this.form.setFieldsValue(); 设置进去即可。

刚才说了设置值，接下来就是获取值。

## form获取值 ##

这个相对简单一些：

this.form.validateFields((err, values) => {
    	if (!err) {
    	  console.log('Received values of form: ', values);
    	  // do something
    	}
    })

这里的values就是你需要拿到的表单内的所有值，打印可以看到的，拿到之后就可以进行其他操作啦

具体能写这么多啦，欢迎补充指教！

[20200824164026543.png]: /images/20221123/c80440a9a5424db290b9a4160b42f4c8.png
[Object.assign]: https://blog.csdn.net/a18792627168/article/details/106725541?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159826025519195162544868%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=159826025519195162544868&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-1-106725541.pc_v1_rank_blog_v1&utm_term=%E6%B7%B1&spm=1018.2118.3001.4187
[lodash_pick]: https://blog.csdn.net/a18792627168/article/details/108199498
[this._nextTick]: https://blog.csdn.net/a18792627168/article/details/107924724