Vue3 使用 el-form 嵌套 el-table 进行单条数据的表单校验

概述

在实际开发过程中，我们经常需要处理表格中的表单数据，比如在编辑表格中的某一行数据时进行校验。本文将介绍如何在 Vue3 和 Element Plus 中实现这一功能。

示例代码

<template>
  <div>
    <el-form ref="formRef" :model="formObj" :rules="rules">
      <el-table :data="formObj.list">
        <el-table-column label="名称" align="center">
          <template #default="scope">
            <el-form-item
              :prop="'list.' + scope.$index + '.name'"
              :rules="[
                { required: true, message: '名称不能为空', trigger: 'blur' },
              ]"
            >
              <el-input v-model="scope.row.name" />
            </el-form-item>
            <el-form-item
              :prop="'list.' + scope.$index + '.desc'"
              :rules="[
                { required: true, message: '描述不能为空', trigger: 'blur' },
              ]"
            >
              <el-input v-model="scope.row.desc" />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

let formObj = ref({
  list: [
    {
      name: '',
      desc: ''
    }
  ],
});

const formRef = ref(null);

const rules = {
  // 这里不需要单独定义规则，因为已经在模板中指定了
};

// 提交表单
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表单提交成功');
      // 进行表单提交逻辑
    } else {
      console.log('表单验证失败');
      return false;
    }
  });
};
</script>

<style>
</style>

分析

1. 定义表单数据

在这个例子中，我们使用了一个名为 formObj 的响应式对象来存储表格的数据。formObj 包含一个名为 list 的数组，数组中的每个元素都代表表格中的一行。

let formObj = ref({
  list: [
    {
      name: '',
      desc: ''
    }
  ],
});

2. 表单和表格的结合

在模板中，我们使用 <el-form> 组件包裹整个表格，并将 formObj 作为 model 传入。这意味着整个表单将与 formObj 的数据绑定在一起。

<el-form ref="formRef" :model="formObj" :rules="rules">
  <el-table :data="formObj.list">
    <!-- 表格列内容 -->
  </el-table>
</el-form>

3. 单条数据的校验

为了实现每一条数据的独立校验，我们需要在 <el-form-item> 中指定 prop 属性。这里我们使用模板字符串动态生成 prop 的值，使其能够指向表格中特定行的特定字段。

<el-form-item
  :prop="'list.' + scope.$index + '.name'"
  :rules="[
    { required: true, message: '名称不能为空', trigger: 'blur' },
  ]"
>
  <el-input v-model="scope.row.name" />
</el-form-item>

4. 提交表单

当用户点击提交按钮时，我们可以通过调用 <el-form> 的 validate 方法来触发表单验证。

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表单提交成功');
      // 进行表单提交逻辑
    } else {
      console.log('表单验证失败');
      return false;
    }
  });
};

总结

通过上述方法，我们可以实现在 Vue3 中使用 Element Plus 的 <el-form> 组件嵌套 <el-table> 进行单条数据的表单校验。这在实际项目中非常有用，尤其是需要用户输入大量数据并进行实时验证的场景下。