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

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

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

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

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

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