<template>
<a-form :form="form" @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!' }] }]"
>
<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 label="日期">
<a-date-picker placeholder="请输入更新日期" showTime v-decorator="['date', { rules: [{ required: true, message: '请输入日期' }] }]"/>
</a-form-item>
<a-form-item >
<a-button type="primary" html-type="submit"> Submit </a-button>
</a-form-item>
<a-form-item >
<a-button type="primary" @click="handleReset"> Reset </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)
this.form.setFieldsValue({
note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`
})
},
handleReset () {
this.form.resetFields()
}
}
}
</script>
vue form置空
最新推荐文章于 2023-11-30 09:17:37 发布