ant-design-vue中from表单涉及父子组件表单验证.....
当子组件是一个from表单时,借用了父组件里的一“按钮"来验证(接口在父组件里),我是这么做的…子组件部分代码<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"><a-form-item label="用户名"><a-inputplaceholder="请输入"style=
·
当子组件是一个from表单时,借用了父组件里的一“按钮"来验证(接口在父组件里),我是这么做的…
子组件部分代码
<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
<a-form-item label="用户名">
<a-input
placeholder="请输入"
style="width: 120px; height: 32px; margin-top: 3px"
@change="handleChangeUser"
v-decorator="[
'loginUser',
{ rules: [{ required: true, message: '请输入' }] },
]"
>
</a-input>
</a-form-item>
</a-form>
父组件部分代码
<div>
<a-steps :current="current">
<a-step
v-for="item in steps"
:key="item.title"
:title="item.title"
/>
</a-steps>
<div class="steps-content"
v-else-if="isTool == 'tool'"
:style="{ display: current === 1 ? 'block' : 'none' }"
>
//子组件------
<tool-config
v-on:paramsHadoop="paramsHadoop"
ref="parentOrder"//需要去调用子组件定义的方法
></tool-config>
</div>
<div class="steps-action">
<a-button
v-if="current < steps.length - 1"
type="primary"
@click="next"
>下一步
</a-button>
<a-button
v-if="current == steps.length - 1"
type="primary"
@click="hanldeDone"
>完成</a-button
>
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev"
>上一步</a-button
>
</div>
</div>
如下图,触发“完成”按钮, 要实现子组件的内容传到父组件且可以校验
子组件里定义方法
/**
*@description:表单验证--父组件调用
*@return promise对象
*/
submitForm() {
var that = this;
return new Promise(function(resolve, reject) {
that.form.validateFields((err, values) => {
if (!err) {
resolve(values);
//同时将父组件接口需要的参数传过去
that.$emit(
"spot",
that.List,
);
}
});
});
}
父组件里点击按钮里操作
this.$refs.parentOrder.submitForm().then((valid) => {
if (valid) {
//valid就是resolve传过来的form表单里的值
//这里面就可以接下来的操作了。。。。。
}
})
整个大概的流程就是酱紫的…(●’◡’●)
更多推荐
已为社区贡献4条内容
所有评论(0)