vue3绑定多个ref表单，并校验多个表单 |
您所在的位置：网站首页 › 动态表单生成器 › vue3绑定多个ref表单，并校验多个表单 |
vue3绑定多个ref表单，并校验多个表单
|
业务需求
需要填写多个表单，表单个数也是根据接口遍历的个数（不确定），类似如下图这种，因为表单比较多拆成父子组件。 :ref=" el => { refList[index] = el; } " const refList = ref([]); //refList存取多个ref的数组 2.子组件表单用的element表单向外暴露一个表单校验的方法，用promise封装一下 const validateItem = () => { return new Promise((resolve, reject) => { ruleFormRef.value.validate(valid => { if (valid) { resolve('OK'); //如果验证成功返回OK } else { resolve('err'); //验证失败返回err } }); }); }; defineExpose({ validateItem, }); 复制代码 3.在父组件定义一个所有表单校验的方法 const validateAll = () => { let sum = 0; //定义个sum用来判断有几个表单 const arr = []; //定义个数组用来接收所有表单返回的结果 return new Promise((resolve, reject) => { refList.value.forEach(item => { item.validateItem().then(res => { sum++; //每次＋1 arr.push(res); if (sum === refList.value.length) { //判断如果sum等于refList的值说明都校验完 const notAllOk = arr.some(i => i !== 'OK'); //所有通过ok的结果 if (notAllOk) { resolve('err'); } else { resolve('OK'); } } }); }); }); }; 复制代码在需要提交的地方调用 const submit = ()=>{ validateAll().then(res=>{ if(res === 'OK'){ //书写其他逻辑，发请求等 } }) } 复制代码 |
【本文地址】
今日新闻 |
推荐新闻 |