Vue3 element-plus el-form嵌套el-table，并且进行单行校验

在Vue 3和Element Plus中，可以通过自定义校验规则来实现嵌套表单的单行验证。以下是一个简单的例子，展示了如何在el-form中嵌套el-table并对el-table的每行进行验证：

<template>
  <el-form :model="form" ref="formRef" :rules="rules">
    <el-table :data="form.tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
        <template #default="{ row }">
          <el-form-item :prop="`tableData[${row.index}].date`" :rules="rules.date">
            <el-input v-model="row.date"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <!-- 其他列 -->
    </el-table>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
 
const formRef = ref(null);
const form = reactive({
  tableData: [
    { date: '', index: 0 },
    // 其他行数据
  ],
});
 
const rules = {
  date: [
    { required: true, message: '请输入日期', trigger: 'blur' },
  ],
  // 其他字段验证规则
};
 
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功');
    } else {
      ElMessage.error('表单验证失败');
      return false;
    }
  });
};
</script>

在这个例子中，el-form中的每一行数据都通过v-for进行渲染，并且每一行的prop属性都是动态绑定的。这样可以保证每行的数据都能被独立验证。当用户点击提交按钮时，会触发formRef.value.validate方法进行表单验证。如果所有行都通过验证，则提交表单；否则，显示错误信息。