vue3+element-plus的表单中的表格的校验

1.html

<template>
 <el-form  ref="formRef" :model="state" label-width="10px" class="demo-ruleForm">
      <el-table  ref="multipleTableRef" row-key="id" class="table-container" :loading="state.loading" :data="state.SubgroupList" border style="100%; " height="600px" >
        <el-table-column label="Context Name" align="center" prop="contextName" min-width="80px">
        <template #default="scope">
          <span>{{ state.SubgroupList.index }}</span>
            <el-form-item label=" " :prop="'SubgroupList.' + scope.$index + '.contextName'"  :rules="[
            { required: true, message: 'Cannot be empty!' }]">
              <el-input v-model="scope.row.contextName" type="text" autocomplete="off" @blur="initInput(scope)" />
            </el-form-item>
        </template>
      </el-table-column>
    </el-table>
 </el-form>
<el-button class="right-button" type="primary" @click="handleSelect">Select</el-button>        
</template>

2.js

import { ElForm} from 'element-plus';
const formRef = ref(ElForm);
const handleSelect=()=>{
    formRef.value.validate(async (valid: any) => {
        if (valid) {
          console.log("========")
        } else {
          console.log('error submit!')
          return false
        }
      })
  }