本篇内容介绍了“ant design vue的form表单如何取值”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
因为不是很熟悉，所以还是查了文档找了一下使用方式，刚开始查到的文档是这样写的
然后返回了undefined，后来又查询了一些文档，发现我多加了一个props属性，然后使用第二个方法成功了，代码如下：
1、可通过 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()
}2、可通过 v-decorator 进行内置的双向绑定（详情可看下文的数据获取与填充）
数据填充（所有项） this.form.setFieldsValue(data)
数据获取（所有项） this.form.validateFields(async (errors, values) => {
console.log(values)
});3、可通过 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>4、下拉选择框的 labelInValue 属性
通常情况下，通过this.form.getFieldValue(“courseTeacherList”)，你只能获取一个数组包含value值，形如[‘7’,‘10’]，而通过labelInValue属性可以得到[{key: “7”,label: “王凤”},{{key: “10”,label: “姚峰”}}]
key表示value
label表示显示值
<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>5、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表单如何取值”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
