首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 el-form嵌套el-table表单校验

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

2024-08-22 10:49:43 作者：前端学步

在实际开发过程中,我们经常需要处理表格中的表单数据,比如在编辑表格中的某一行数据时进行校验,本文给大家介绍了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> 进行单条数据的表单校验。这在实际项目中非常有用，尤其是需要用户输入大量数据并进行实时验证的场景下。

到此这篇关于Vue3使用el-form嵌套el-table进行单条数据的表单校验功能的文章就介绍到这了,更多相关Vue3 el-form嵌套el-table表单校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！