本篇内容介绍了“ant design vue的form表单如何取值”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
ant design vue的form表单取值
官方中有以下两种取值方式
因为不是很熟悉，所以还是查了文档找了一下使用方式，刚开始查到的文档是这样写的
然后返回了undefined，后来又查询了一些文档，发现我多加了一个props属性，然后使用第二个方法成功了，代码如下：
ant design of vue 学习之表单form
v-decorator（表单验证，内置绑定，初始值）
可通过 v-decorator 进行表单验证
//内置验证规则<a-form-item label="课程名称" v-bind="formItemLayout"> <a-input placeholder="课程名称" v-decorator="['name', { rules: [{ required: true, max: 50, message: '必填项，最大50字符' }] }]" /></a-form-item>//自定义验证规则01<a-form-item> <a-input size="large" type="text" placeholder="手机号" v-decorator="['mobileNumber', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]"> <a-icon slot="prefix" type="mobile" : /> </a-input></a-form-item>//自定义验证规则02<a-form-item v-bind="formItemLayout" label="手机号码"> <a-input placeholder="手机号码" v-decorator="['mobileNumber',{rules: [{ required: true,max:11,message:'请输入正确格式的手机号码',validator:MobileNumberValidator}]}]" /></a-form-item>//在methods中设定方法// 手机号验证MobileNumberValidator (rule, value, callback) { const idcardReg = /^1(3|4|5|6|7|8|9)\d{9}$/ if (!idcardReg.test(value)) { // eslint-disable-next-line standard/no-callback-literal callback('非法格式') } // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应 callback()}可通过 v-decorator 进行内置的双向绑定（详情可看下文的数据获取与填充）
数据填充（所有项） this.form.setFieldsValue(data)数据获取（所有项） this.form.validateFields(async (errors, values) => { console.log(values) });可通过 v-decorator 的initialValue设置初始值
<a-form-item label="课程名称" v-bind="formItemLayout"> <a-input placeholder="课程名称" v-decorator="['name', { initialValue:'姚峰', rules: [{ required: true, max: 50, message: '必填项，最大50字符' }] }]" /></a-form-item>下拉选择框的 labelInValue 属性
通常情况下，通过this.form.getFieldValue(“courseTeacherList”)，你只能获取一个数组包含value值，形如[‘7’,‘10’]，而通过labelInValue属性可以得到[{key: “7”,label: “王凤”},{{key: “10”,label: “姚峰”}}]
key表示valuelabel表示显示值
<a-form-item label="教师" v-bind="formItemLayout"> <a-select mode="multiple" labelInValue placeholder="请选择教师" v-decorator="['courseTeacherList', { rules: [{ required: true, message: '必填项，请选择教师' }] }]"><a-select-option v-for="item in teacherList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option> </a-select></a-form-item>type类型检验
Type string: Must be of type string. This is the default type. number: Must be of type number. boolean: Must be of type boolean. method: Must be of type function. regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp. integer: Must be of type number and an integer. float: Must be of type number and a floating point number. array: Must be an array as determined by Array.isArray. object: Must be of type object and not Array.isArray. enum: Value must exist in the enum. date: Value must be valid as determined by Date url: Must be of type url. hex: Must be of type hex. email: Must be of type email. any: Can be any type.数据获取与填充
//获取一个输入控件的值 Function(fieldName: string)let myDate = this.form.getFieldValue("startDate");//获取一组输入控件的值，如不传入参数，则获取全部组件的值 Function([fieldNames: string[]])let value = this.form.getFieldsValue(["startDate","endDate"]);let value = this.form.getFieldsValue();//设置一组输入控件的值this.form.setFieldsValue({startDate:res.result["startDate"],endDate:res.result["endDate"],})//设置一组输入控件的值 加了labelInValue属性this.form.setFieldsValue({userName:{label:res.result["userName"],key:res.result["userNameId"]}})//设置表单数据 对日期、下拉框含labelInValue属性的form控件的数据设置要特殊处理才能绑定//对于日期控件需要将string类型的数据转换moment类型//对于下拉框含labelInValue属性控件，数据需要转换成key、label的对象格式import moment from 'moment'setFormValues (record) { // 控制教师 if (courseTeacherList && courseTeacherList.length > 0) { record['courseTeacherList'] = courseTeacherList.map(item => ({ key: item.teacherId + '', label: item.teacherName })) } const fields = ['courseTeacherList', 'certificateNo', 'cardTime', 'termValidity', 'documentStatus', 'remark'] Object.keys(record).forEach((key) => { if (fields.indexOf(key) !== -1) { this.form.getFieldDecorator(key) const obj = {} if (key === 'cardTime' && record['cardTime'] != undefined) { obj[key] = moment(data[key], 'YYYY-MM-DD') } else { obj[key] = record[key] } this.form.setFieldsValue(obj) } })},//关闭表单清空表单数据this.form.resetFields();//提交表单获取数据//通过this.form.validateFields函数进行表单验证以及数据获取//对于日期控件，获取的是moment类型数据，需要转换成字符串储存，//形如values.birthday = values.birthday ? values.birthday.format('YYYY-MM-DD') : ''handleSubmit () { const { id } = this this.form.validateFields((err, values) => { if (!err) { this.submitLoading = true values.birthday = values.birthday ? values.birthday.format('YYYY-MM-DD') : '' // 处理教师 values.courseTeacherList = values.courseTeacherList.map(item => { const obj = {} obj.teacherId = Number(item.key) return obj }) if (id) { // 修改 updateCourse({ id, ...values }).then(res => { if (res.code == 0) { this.$message.success('保存成功') this.form.resetFields() this.$router.back() } else { this.$message.error('保存失败，请稍后再试') } }).finally(() => { this.submitLoading = false }) } else { // 添加 addCourse(values).then(res => { if (res.code == 0) { this.$message.success('保存成功') this.form.resetFields() this.$router.back() } else { this.$message.error('保存失败，请稍后再试') } }).finally(() => { this.submitLoading = false }) } } })},表单实例
<template> <div> <a-card> <a-form :form="form"> <!-- 文本框 --> <a-form-item label="课程名称" v-bind="formItemLayout"> <a-input placeholder="课程名称" v-decorator="['name', { rules: [{ required: true, max: 50, message: '必填项，最大50字符' }] }]" /> </a-form-item> <a-form-item label="教师" v-bind="formItemLayout"> <a-select mode="multiple" labelInValue placeholder="请选择教师" v-decorator="['courseTeacherList', { rules: [{ required: true, message: '必填项，请选择教师' }] }]"> <a-select-option v-for="item in teacherList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option> </a-select> </a-form-item> <!-- 文本域 --> <a-form-item label="课程简介" v-bind="formItemLayout"> <a-textarea placeholder="课程简介" :autosize="{ minRows: 6, maxRows: 10 }" v-decorator="['introduction', { rules: [{ required: true, max: 1000, message: '必填项，最大1000字符' }] }]" /> </a-form-item> <!-- 步进器 --> <a-form-item label="时长" v-bind="formItemLayout"> <a-input-number v-decorator="['timeLength',{initialValue:60,rules:[{required:true,message:'必填'}]}]" :min="1" :max="100" :precision="0" /> </a-form-item> <!-- 日期控件 --> <a-form-item label="开课日期" v-bind="formItemLayout"> <a-date-picker v-decorator="['startDate', { rules: [{ type: 'object', required: true, message: '请选择开课日期' }] }]" format="YYYY-MM-DD" /> </a-form-item> <!-- 开关滑块 --> <a-form-item label="在线课程" v-bind="formItemLayout"> <a-switch checkedChildren="是" unCheckedChildren="否" v-decorator="['online', { valuePropName: 'checked', initialValue: true }]" /> </a-form-item> <!-- 单选框 --> <a-form-item label="是否发布" v-bind="formItemLayout"> <a-radio-group name="radioGroup" v-decorator="['publish', { initialValue: 1 }]"> <a-radio :value="1">发布</a-radio> <a-radio :value="0">不发布</a-radio> </a-radio-group> </a-form-item> </a-form> <a-row> <a-col :span="14" :offset="5" > <a-button :loading="submitLoading" type="primary" @click="handleSubmit">保存</a-button> <a-button @click="back">返回</a-button> </a-col> </a-row> </a-card> </div></template>import moment from 'moment'import { addCourse, getTeacherList, getCourseById, updateCourse } from '@/api/learning/course'export default { data () { return { submitLoading: false, form: this.$form.createForm(this), formItemLayout: { labelCol: { lg: { span: 7 }, sm: { span: 7 } }, wrapperCol: { lg: { span: 10 }, sm: { span: 17 } } }, teacherList: [], unitSn: '' } }, created () { // 获取教师列表 this.getTeacherList() // 获取详情 if (this.id) { this.getInfo() } }, computed: { id () { return this.$route.query.id } }, methods: { // 获取教师列表 getTeacherList () { const unitSn = this.unitSn || this.$store.getters.userInfo.unitSn const params = { current: 1, size: -1, unitSn } getTeacherList(params).then(res => { if (res.code == 0) { if (res.data.records.length > 0) { this.teacherList = res.data.records.map(item => { const obj = {} obj.id = item.id + '' obj.name = item.name return obj }) } } else { this.$message.error(res.message) } }) }, // 获取详情 设置表单数据 getInfo () { let { id } = this id = Number(id) getCourseById(id).then(res => { if (res.code == 0) { this.setFormValues({ ...res.data }) } else { this.$message.error(res.message) } }) }, // 设置表单数据 setFormValues (record) { const { courseTeacherList, unitSn } = record this.unitSn = unitSn // 控制教师 if (courseTeacherList && courseTeacherList.length > 0) { record['courseTeacherList'] = courseTeacherList.map(item => ({ key: item.teacherId + '', label: item.teacherName })) } const fields = ['name', 'courseTeacherList', 'introduction', 'timeLength', 'startDate', 'online', 'publish'] Object.keys(record).forEach(key => { if (fields.indexOf(key) !== -1) { this.form.getFieldDecorator(key) const obj = {} if (key === 'startDate' && record['startDate'] != undefined) { obj[key] = moment(record[key], 'YYYY-MM-DD') } else { obj[key] = record[key] } this.form.setFieldsValue(obj) } }) }, // 保存 handleSubmit () { this.form.validateFields((err, values) => { if (!err) { const { id } = this this.submitLoading = true // 处理教师 values.courseTeacherList = values.courseTeacherList.map(item => { const obj = {} obj.teacherId = Number(item.key) return obj }) // 处理日期 values.startDate = values.startDate ? values.startDate.format('YYYY-MM-DD') : '' if (id) { // 修改 updateCourse({ id, ...values }).then(res => { if (res.code == 0) { this.$message.success('保存成功') this.form.resetFields() this.$router.back() } else { this.$message.error('保存失败，请稍后再试') } }).finally(() => { this.submitLoading = false }) } else { // 添加 addCourse(values).then(res => { if (res.code == 0) { this.$message.success('保存成功') this.form.resetFields() this.$router.back() } else { this.$message.error('保存失败，请稍后再试') } }).finally(() => { this.submitLoading = false }) } } }) }, // 返回 back () { this.$confirm({ title: '还未保存，是否返回上一级？', okText: '确认返回', cancelText: '取消', onOk: () => { this.$router.back() } }) } }}</script><style lang="less" scoped></style>“ant design vue的form表单如何取值”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
