vue3+elementplus 表单嵌套 el-tabs，切换tabs时抛出Uncaught (in promise)错误。

Question

<template>

<el-button type="primary" class="el-button" icon="Plus" @click="dialogVisible = true">添加</el-button>

<el-dialog v-model="dialogVisible" title="添加人员">

                <el-form :ref="personFrom[tabsIndex]" :model="fromData" :rules="rules[tabsIndex]" label-width="100px"
                    class="demo-fromData" :size="formSize" status-icon label-position="left">

                    <el-tabs type="border-card" v-model="activeName" @tab-click="tabsClick">
                        <!-- 基本信息tab -->
                        <el-tab-pane label="基本信息" name='basic'>

                            <el-row justify="space-between">
                                <el-col :span="10">
                                    <el-form-item label="姓名" prop="basic.username">
                                        <el-input v-model="fromData.basic.username" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <!-- 学历信息tab -->
                        <el-tab-pane label="学历信息" name='education'>
                            <el-row justify="space-between">
                                <el-col :span="10">
                                    <el-form-item label="毕业院校" prop="education.graduate_ins">
                                        <el-input v-model="fromData.education.graduate_ins" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <!-- 履历信息tab -->
                        <el-tab-pane label="履历信息" name='record'>Role</el-tab-pane>
                        <!-- 人事信息tab -->
                        <el-tab-pane label="人事信息" name='personnel'>Task</el-tab-pane>
                        <!-- 借调信息tab -->
                        <el-tab-pane label="借调信息" name='tem'>Task</el-tab-pane>
                    </el-tabs>
                </el-form>

                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button @click="resetForm()">重置</el-button>
                        <el-button type="primary" @click="submitForm()">保存</el-button>
                    </span>
                </template>
            </el-dialog>
</template>

<script setup>
const dialogVisible = ref(false)
const formSize = ref('default')
const personFrom = reactive(['basic', 'education', 'record', 'personnel', 'tem'])//表单ref数组
let activeName = ref('basic')//默认选中tabs页
let tabsIndex = ref(0)//tabs下标
const fromData = reactive({//表单数据
    basic: {
        username: '张三',
    },
    education: {
        graduate_ins: ''
    }
})
// 切换tabs事件
function tabsClick(tab, event) {
    activeName.value = tab.props.name
    tabsIndex.value = tab.index
    console.log(rules[tabsIndex.value])
}
const rules = reactive([//校验规则数组
    {
        'basic.username': [
            { required: true, message: 'Please input Activity name', trigger: 'blur' },
            { min: 2, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
    }, 
    {
        'education.graduate_ins': [
            { required: true, message: 'Please input graduate_ins', trigger: 'blur' },
            { min: 2, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
    }
])
function submitForm() {
    let formRef = personFrom[tabsIndex.value];
    proxy.$refs[formRef].validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    }).catch((e)=>{
        console.log(e)
    })
}
</script>

我的想要的效果是，表单的提交按钮能分别校验不同的tab页，比如点击【基本信息】时，提交时校验的只是【基本信息】这一标签页的数据，而不会提交其他tab页的数据。目前好像是可以了，但是不知道为什么会报这个promise的错误。希望大家可以帮帮看看，多谢了！