vue 自定义表单 子组件循环生成表单项el-table-column 并且动态可追加减少行数然后把参数返回父组件

好的，我理解了你的问题。你可以通过在父组件中定义一个数据数组，然后在子组件中通过 v-for 循环遍历数组来动态生成表单项。在子组件中，你可以接收一个 props 作为表单数据的来源。当父组件需要追加或减少表单行数时，你可以通过改变数据数组的长度来实现。

下面是一个简单的示例代码：

父组件：

<template>
  <div>
    <custom-form :form-data="formData"></custom-form>
    <button @click="addRow">添加行</button>
    <button @click="deleteRow">删除行</button>
  </div>
</template>

<script>
import CustomForm from './CustomForm.vue';

export default {
  components: {
    CustomForm,
  },
  data() {
    return {
      formData: [
        { name: '姓名', value: '' },
        { name: '年龄', value: '' },
        { name: '性别', value: '' },
      ],
    };
  },
  methods: {
    addRow() {
      this.formData.push({ name: '', value: '' });
    },
    deleteRow() {
      this.formData.pop();
    },
  },
};
</script>

子组件：

<template>
  <el-table :data="formData">
    <el-table-column
      v-for="(item, index) in formData"
      :key="index"
      :label="item.name"
    >
      <el-input v-model="item.value"></el-input>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    formData: {
      type: Array,
      required: true,
    },
  },
};
</script>

在这个示例中，父组件中的 formData 数组包含了三个表单项，子组件通过 v-for 循环遍历数组来动态生成表单项。当父组件需要追加或减少表单行数时，它会改变 formData 数组的长度，子组件会自动更新表单项的数量。

在子组件中，formData 数组是通过 props 接收的，可以在表单项中使用 v-model 来双向绑定表单数据。当表单数据发生变化时，可以通过事件或者回调函数将数据返回给父组件。