arco-design-vue
arco-design-vue copied to clipboard
表单实例新增getFormValue方法
trafficstars
- [ ] I'm sure this does not appear in the issue list of the repository
基本信息
现有案例
// 具体实现 在现有的form.vue里面改造 在setup里面添加getFormValue方法
const getFormValue = () => {
new Promise((resolve, reject) => {
validate(errors => {
if (!errors) {
const data: Record<string, any> = {};
for (const key in fields) {
data[key] = model[key];
}
resolve(data)
} else {
reject(errors);
}
})
}))
}
在setup里面return
innerGetFormVslue: getFormValue,
在methods里面添加
/**
* @zh 获取表单值
* @en get form values
* @public
* @returns {Promise<Record<string, any>>}
*/
getFormValue(): Promise<Record<string, any>> {
return this.innerGetFormVslue();
}
预期解决问题
多个表单提交验证时获取值可可通过getFormValue方法去解决例如
表单实例
const form1 = ref()
const form1 = ref()
提交
const handleSubmitClick = async() => {
const [data1, data2] = await Promise.all([ form1.value.getFormValue(), form2.value.getFormValue()])
}
## 额外补充
这个功能真的很实用,尤其一个页面多个表单同时提交的时候,让我们提交的表单值更纯粹,所见即所得,页面表单展现了哪些formItem,就得到了哪些值
<!--- 声明: 如果提交带有攻击性的 issue,提交者将会被禁止在 arco-design 组织下发言。 -->
<!-- generated by arco-issue. DO NOT REMOVE -->