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=&