直接用table组件

如果你想直接使用Element Plus的`<el-table>`组件来构建嵌套的输入表格，你可以简化HTML结构并利用其内置的动态渲染特性。下面是一个示例：

首先，在你的HTML模板里，引入`<el-table>`、`<el-table-column>`以及嵌套的`<el-col>`：

<template>
  <div>
    <el-form ref="form">
      <el-table :data="formData" style="width: 100%">
        <el-table-column prop="field1" label="字段1">
          <template slot-scope="{ row, $index }">
            <el-input v-model="row.field1"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="subFields" label="嵌套字段">
          <template slot-scope="{ row, $index }">
            <el-row :gutter="8">
              <el-col :span="6">
                <el-input v-model="row.subFields[0]"></el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="row.subFields[1]"></el-input>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="field3" label="字段3">
          <template slot-scope="{ row, $index }">
            <el-input v-model="row.field3"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form>
  </div>
</template>

然后，在你的`<script setup>`部分，定义表格的数据：

import { ref } from 'vue';
const formData = ref([
  { field1: '', subFields: ['', ''] }, // 初始化两个表行数据
  // 可以根据需要增加更多行
]);

const submitForm = async () => {
  // 提交前，如果需要，可以对数据做校验
  console.log('FormData:', formData.value);
};

这将会创建一个表格，每个单元格都可以通过`v-model`双向绑定输入框的内容。点击“提交”按钮时，你可以从`formData`获取完整的数据数组。