文章目录

前言一、为什么要用from？二、基本使用总结

---

前言

记录antd vue中from表单的使用

---

一、为什么要用from？

antd vue中的from组件基本包含了在开发中会用到的所有from表单的形式，输入框、下拉框、单选框、复选框、级联、日期等等等等，然后它里面的功能也特别全必填校验、输入完成之后的样式改变、框内图标，后缀、获取任意表单数值等等功能都可以实现。

二、基本使用

代码如下（示例）：

<template> <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit"> <a-form-item label="Note"> <a-input v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]" /> </a-form-item> <a-form-item label="Gender"> <a-select v-decorator="[ 'gender', { rules: [{ required: true, message: 'Please select your gender!' }] }, ]" placeholder="Select a option and change input text above" @change="handleSelectChange" > <a-select-option value="male"> male </a-select-option> <a-select-option value="female"> female </a-select-option> </a-select> </a-form-item> <a-form-item :wrapper-col="{ span: 12, offset: 5 }"> <a-button type="primary" html-type="submit"> Submit </a-button> </a-form-item> </a-form> </template> <script> export default { data() { return { formLayout: 'horizontal', form: this.$form.createForm(this, { name: 'coordinated' }), }; }, methods: { handleSubmit(e) { e.preventDefault(); this.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); }, handleSelectChange(value) { console.log(value); //使用 setFieldsValue 来动态设置其他控件的值。 this.form.setFieldsValue({ note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`, }); }, }, }; </script>

总结

相关资料可见https://www.antdv.com/components/form-cn