ElementPlus 表格编辑与表单校验

在表格中可以进行单条数据的新增、编辑、删除操作，并能对数据进行校验。

表格编辑与表单校验

1、功能解析

• ElForm表单嵌套ElTable，ElTableColumn默认插槽嵌套ElFormItem及表单组件；
• 从ElTableColumn默认插槽中解构出：#default="{row, $index}"；
• 在ElFormItem的rule属性填写校验规则；prop属性填写：表单项.索引.属性名（tableData.0.name）

2、功能实现

1. template

<div class="p-4 bg-[#f5f5f5]">
  <el-form :model="form" ref="formRef">
    <el-table :data="form.tableData" border stripe>
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="名称" prop="name">
        <template #default="{ row, $index }">
          <el-form-item
            class="mt-4"
            label=" "
            :prop="`tableData.${$index}.name`"
            :rules="[
              { required: true, message: '请输入名称', trigger: 'blur' },
            ]"
          >
            <el-input v-model="row.name" placeholder="请输入名称" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="性别" prop="sex">
        <template #default="{ row, $index }">
          <el-form-item
            class="mt-4"
            label=" "
            :prop="`tableData.${$index}.sex`"
            :rules="[
              { required: true, message: '请选择性别', trigger: 'change' },
            ]"
          >
            <el-select v-model="row.sex" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ $index }">
          <el-button
            v-if="$index === 0"
            size="small"
            type="primary"
            @click="addRow"
            circle
            :icon="Plus"
          />
          <el-button
            v-else
            size="small"
            type="danger"
            @click="removeRow($index)"
            circle
            :icon="Delete"
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-4 text-right">
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-form>
</div>

2. script setup

import { Delete, Plus } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";

/** 表单及表格数据，必须这样写，否则无法触发表单校验 */
const form = ref({
  tableData: [],
});

/** 表单实例 */
const formRef = ref(null);

/** 添加一行 */
const addRow = () => {
  form.value.tableData.push({ name: "", sex: "" });
};

/** 添加某行 */
const removeRow = (index) => {
  form.value.tableData.splice(index, 1);
};

/** 保存数据，触发表单校验 */
const save = () => {
  formRef.value.validate((valid) => {
    if (!valid) return;
    console.log(form.value.tableData);
  });
};

/** 挂载时，生成第一行数据 */
onMounted(() => {
  form.value.tableData = [];
  addRow();
});

---

3、详细解析

<el-table-column label="名称" prop="name">
  <template #default="{ row, $index }">
    <el-form-item
      class="mt-4"
      label=" "
      :prop="`tableData.${$index}.name`"
      :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
    >
      <el-input v-model="row.name" placeholder="请输入名称" />
    </el-form-item>
  </template>
</el-table-column>

• #default="{ row, $index }"：结构当前行数据 row 和索引 $index；
• label=" "：实现页面中展示必填校验*，可不写；
• :prop="`tableData.${$index}.name`"：绑定具体行的某个数据；
• :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"：表单项校验规则；