Element Plus 表格表单校验功能实现原理

<el-form ref="tableFormRef" :model="formData" :rules="tableRules">
  <el-table :data="formData.tableData" style="width: 100%" border>
    <!-- 表格列内容 -->
  </el-table>
</el-form>

<el-table-column label="数据项" min-width="180">
  <template #default="{ row, $index }">
    <div class="table-form-item">
      <el-form-item
        :prop="`tableData[${$index}].name`"
        :rules="tableRules.name"
        style="margin: 0"
      >
        <el-input v-model="row.name" placeholder="数据项" clearable />
      </el-form-item>
    </div>
  </template>
</el-table-column>

const tableRules: FormRules = {
  name: [{ required: true, message: "请输入数据项", trigger: "blur" }],
  unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
  statisticalMethod: [
    { required: true, message: "请选择统计方式", trigger: "blur" },
  ],
};

.table-form-item {
  padding: 14px 0;
}

┌─────────────────────┐
│   Input Field       │  ← 输入框
├─────────────────────┤
│ ❌ 请输入数据项      │  ← 错误信息 (需要空间)
└─────────────────────┘

┌─────────────────────┐
│ [Input Field]       │
└─────────────────────┘
  ❌ 错误信息被遮挡或挤压

┌─────────────────────┐
│                     │  ← 上边距 14px
│ [Input Field]       │
│ ❌ 请输入数据项      │  ← 错误信息正常显示
│                     │  ← 下边距 14px
└─────────────────────┘

const addRow = () => {
  formData.tableData.push({
    name: "",
    unit: "",
    statisticalMethod: 0,
  });
};

const deleteData = (row: any, index: number) => {
  if (formData.tableData.length === 1) {
    ElMessage.warning("至少保留一行数据");
    return;
  }
  formData.tableData.splice(index, 1);
  // 删除后重新验证表单
  tableFormRef.value?.clearValidate();
};

interface TableRowData {
  name: string;          // 数据项名称
  unit: string;          // 单位
  statisticalMethod: number;  // 统计方式（0:累加, 1:平均）
}
interface FormData {
  tableData: TableRowData[];
}