vue项目中表格内部输入框校验

在项目中经常会遇到在表格中的输入框，同时又需要在最后提交的时候校验输入框是否已填或者其他校验条件。和正常文档校验不同点在于，表格中的输入框数量可能是不确定的，需要动态的校验表格中输入框内容。 话不多说，直接上代码，可以直接参考修改即可(以vue3+js+elementplus为例)：

<template>
<el-form :model="form" ref="formRef">
    <el-table :data="form.list" border>
        <el-table-column label="姓名">
            <template #default="{ row, $index }">
              <el-form-item :prop="`list.${$index}.name`" :rules="rules.name">
                <el-input v-model.trim="row.name" clearable />
              </el-form-item>
            </template>
        </el-table-column>
        <el-table-column label="年龄">
            <template #default="{ row, $index }">
              <el-form-item :prop="`list.${$index}.age`" :rules="rules.age">
                <el-input-number v-model="row.age" controls position="right" clearable />
              </el-form-item>
            </template>
        </el-table-column>
        <el-table-column label="科目">
            <template #default="{ row, $index }">
              <el-form-item :prop="'list.'+$index+'.lesson" :rules="rules.lesson">
                <el-input v-model.trim="row.lesson" clearable />
              </el-form-item>
            </template>
        </el-table-column>
        <el-table-column label="分数">
            <template #default="{ row, $index }">
              <el-form-item :prop="'list.'+$index+'.score'" :rules="rules.score">
                <el-input-number v-model="row.score" controls position="right" clearable />
              </el-form-item>
            </template>
        </el-table-column>
    </el-table>
    <el-form-item>
        <el-button type="primary" @click="submitFn">提交</el-button>
    </el-form-item>
</el-form>
</template>

<script setup>
    import { toRefs, reactive, ref } from "vue"
    
    export const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: ['change','blur'] }],
      age: [ { required: true, message: '请输入年龄', trigger: ['change','blur'] }],
      lesson: [{ required: true, message: '请输入科目', trigger: ['change','blur'] }],
      score: [{ required: true, message: '请输入分数', trigger: ['change','blur'] }]
    }

    const state = reactive({
        form:{
            list:[{
                name:'王梓涵',
                age:18,
                lesson:'语文',
                score:'100'
            },{
                name:'张子涵',
                age:19,
                lesson:'语文',
                score:'94'
            },{
                name:'李紫涵',
                age:19,
                lesson:'语文',
                score:'92'
            },{
                name:'吴子晗',
                age:18,
                lesson:'语文',
                score:'99'
            },{
                name:null,
                age:null,
                lesson:null,
                score:null
            },{
                name:null,
                age:null,
                lesson:null,
                score:null
            }]
        }
    })
    
    let { form } = toRefs(state)
    
    const formRef = ref(null)
    
    const submitFn = _ => {
        formRef.value.validate(async res => {
            if (res) {
              const { code, data, msg } = await api交互函数()
              if (code === 200) ElMessage.success({ message: '提交成功' })
              else ElMessage.warning({ message: msg })
            }
        })
    } 
</script>