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

<el-table-column label="數(shù)據(jù)項(xiàng)" 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="數(shù)據(jù)項(xiàng)" clearable />
      </el-form-item>
    </div>
  </template>
</el-table-column>

const tableRules: FormRules = {
  name: [{ required: true, message: "請(qǐng)輸入數(shù)據(jù)項(xiàng)", trigger: "blur" }],
  unit: [{ required: true, message: "請(qǐng)輸入單位", trigger: "blur" }],
  statisticalMethod: [
    { required: true, message: "請(qǐng)選擇統(tǒng)計(jì)方式", trigger: "blur" },
  ],
};

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

┌─────────────────────┐
│   Input Field       │  ← 輸入框
├─────────────────────┤
│ ? 請(qǐng)輸入數(shù)據(jù)項(xiàng)      │  ← 錯(cuò)誤信息 (需要空間)
└─────────────────────┘

┌─────────────────────┐
│ [Input Field]       │
└─────────────────────┘
  ? 錯(cuò)誤信息被遮擋或擠壓

┌─────────────────────┐
│                     │  ← 上邊距 14px
│ [Input Field]       │
│ ? 請(qǐng)輸入數(shù)據(jù)項(xiàng)      │  ← 錯(cuò)誤信息正常顯示
│                     │  ← 下邊距 14px
└─────────────────────┘

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

const deleteData = (row: any, index: number) => {
  if (formData.tableData.length === 1) {
    ElMessage.warning("至少保留一行數(shù)據(jù)");
    return;
  }
  formData.tableData.splice(index, 1);
  // 刪除后重新驗(yàn)證表單
  tableFormRef.value?.clearValidate();
};

interface TableRowData {
  name: string;          // 數(shù)據(jù)項(xiàng)名稱
  unit: string;          // 單位
  statisticalMethod: number;  // 統(tǒng)計(jì)方式（0:累加, 1:平均）
}
interface FormData {
  tableData: TableRowData[];
}