新增提交表单且验证不通过时提醒

 <!--
 <!--
  * @Date: 2022-07-18 10:22:22
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-04 10:22:01
+ * @LastEditTime: 2024-08-09 19:22:14
  * @FilePath: /data-table/src/views/index.vue
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
@@ -23,7 +23,7 @@
     <div v-if="PHeader.flow_node_name" style="text-align: center;">({{ PHeader.flow_node_name }})</div>
     <div v-if="PHeader.flow_node_name" style="text-align: center;">({{ PHeader.flow_node_name }})</div>
     <div v-if="PHeader.description" class="table-desc" v-html="PHeader.description" />
     <div v-if="PHeader.description" class="table-desc" v-html="PHeader.description" />
     <van-config-provider :theme-vars="themeVars">
     <van-config-provider :theme-vars="themeVars">
-      <van-form ref="myForm" @submit="onSubmit" :scroll-to-error="true">
+      <van-form ref="myForm" @submit="onSubmit" @failed="onFailed" :scroll-to-error="true">
         <van-cell-group :border="false">
         <van-cell-group :border="false">
           <component v-for="(item, index) in formData" :id="item.key" :ref="(el) => setRefMap(el, item)" :key="index"
           <component v-for="(item, index) in formData" :id="item.key" :ref="(el) => setRefMap(el, item)" :key="index"
             :is="item.component" :item="item" @active="onActive" @remove="onRemove" />
             :is="item.component" :item="item" @active="onActive" @remove="onRemove" />
@@ -206,7 +206,7 @@ import {
 import { useRoute } from "vue-router";
 import { useRoute } from "vue-router";
 import { queryFormAPI, postVerifyPasswordAPI } from "@/api/form.js";
 import { queryFormAPI, postVerifyPasswordAPI } from "@/api/form.js";
 import { addFormDataAPI, queryFormDataAPI, modiFormDataAPI, flowFormDataAPI } from "@/api/data.js";
 import { addFormDataAPI, queryFormDataAPI, modiFormDataAPI, flowFormDataAPI } from "@/api/data.js";
-import { showSuccessToast, showFailToast, showConfirmDialog } from "vant";
+import { showSuccessToast, showFailToast, showConfirmDialog, showToast } from "vant";
 import { wxInfo, getUrlParams, formatDate } from "@/utils/tools";
 import { wxInfo, getUrlParams, formatDate } from "@/utils/tools";
 import { styleColor } from "@/constant.js";
 import { styleColor } from "@/constant.js";
 import { sharePage } from '@/composables/useShare.js'
 import { sharePage } from '@/composables/useShare.js'
@@ -1291,6 +1291,10 @@ const onSubmit = async (values) => {
     // }
     // }
   }
   }
 };
 };
+
+const onFailed = (errorInfo) => { // 提交表单且验证不通过后触发
+  showToast('有填写错误，请检查')
+}
 </script>
 </script>
 
 
 <style lang="less">
 <style lang="less">