vue怎么把el-form 表单的数据添加到el-table 表格，表格上要显示数据

在Vue中，你可以通过监听表单元素的提交事件，并在事件处理函数中获取表单数据，然后将其添加到一个数据数组中。这个数组随后可以被绑定到`el-table`的`data`属性上，从而在表格中显示数据。具体步骤如下：

1. 在`el-form`表单中添加一个提交按钮，并为其绑定点击事件，例如使用`v-on:click`或简写为`@click`。
2. 在该事件处理函数中，通过表单元素或其子元素获取数据，这通常涉及到使用`v-model`进行双向数据绑定。
3. 将获取到的数据添加到一个数组中，这个数组是Vue实例的data属性的一部分。
4. 使用`el-table`的`:data`属性绑定步骤3中得到的数组。

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

<template>
  <div>
    <!-- 表单部分 -->
    <el-form ref="form" @submit.native.prevent="handleSubmit">
      <el-form-item label="姓名">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model.number="formData.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格部分 -->
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据
      formData: {
        name: '',
        age: null
      },
      // 表格数据
      tableData: []
    };
  },
  methods: {
    // 表单提交处理函数
    handleSubmit() {
      // 将表单数据添加到表格数据数组中
      this.tableData.push({ ...this.formData });

      // 重置表单数据
      this.formData.name = '';
      this.formData.age = null;
    }
  }
};
</script>

在上述示例中，当点击提交按钮时，会触发`handleSubmit`方法，该方法会将`formData`对象添加到`tableData`数组中。`el-table`通过`:data="tableData"`将数据绑定到表格中，因此表格会显示新添加的数据。