el-element 表格中的form表单校验

30 阅读1分钟
<el-form label-width="0px" :model="state.formData" :rules="attributeRules" ref="tableFormRef" class="addTable" size="default">
        <el-table :data="state.formData.biddingCompanys" style="width: 100%" class="projectManagement-table" header-cell-class-name="projectManagement-table-header">
          <el-table-column label="序号" type="index" width="100px" />
          <el-table-column prop="addr" width="160" label="电话">
            <template #default="scope">
              <el-form-item :prop="'biddingCompanys.'+scope.$index+'.phone'" :rules="attributeRules.phone">
                <el-input v-model="scope.row.phone"  placeholder="请输入" size="default"/>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
</el-form>
// js
const tableFormRef = ref<FormInstance>();
const attributeRules = reactive({
  phone: [
    { pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur'},
  ],
})
// 提交校验
const submitHandle = async ()=>{
    tableFormRef?.value?.validate(async(valid)=>{
        console.log(valid)
    })
}