使用vue初用antd 用v-model来双向绑定Form表单
第一次用vue使用ant designUI框架,还没从elementUI中转换过来…于是在不能用Modal模态框,需要在页面传值接收的时候handleEdit (record) {this.$router.push({ path: '/form/base-form', query: { id: record, title: 'Edit'} })}fo...
·
第一次用vue使用ant designUI框架,还没从elementUI中转换过来…
于是在不能用Modal模态框,需要在页面传值接收的时候
handleEdit (record) {
this.$router.push({ path: '/form/base-form', query: { id: record, title: 'Edit' } })
}
form页面接收:
init () {
// 接收传递数据
const { id, title } = this.$route.query
this.param = id
this.title = title
this.temp = Object.assign({}, this.param)
},
仍是用的v-model去绑定表单的值:
<a-form-item
label="Name"
:labelCol="{lg: {span: 1}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 6}, sm: {span: 17} }">
<a-input
v-model="temp.name"
v-decorator="[
'name',
{rules: [{ required: true, message: '请输入你的昵称' }]}
]"
name="name"
placeholder="昵称" />
</a-form-item>
发现这里根本绑不上去啊o(╥﹏╥)o
于是有了这个方法:
:autoFormCreate="(form)=>{this.form = form}"
在data里面:
form: null
提交表单也是没有问题的:
handleSubmit (e) {
e.preventDefault()
console.log(this.temp, 'this.temp')
}
这就实现了O(∩_∩)O哈哈~
更多推荐
已为社区贡献5条内容
所有评论(0)