vue怎么把el-form 表单的数据添加到el-table 表格

在Vue中，将`el-form`表单的数据添加到`el-table`表格通常涉及以下步骤：

1. 创建数据模型：首先定义一个Vue实例或组件的数据对象，其中包含表单数据和表格数据的数组。

2. 表单数据绑定：使用`v-model`指令将`el-form`表单的输入框绑定到数据对象的相应属性上，这样当表单输入框的值改变时，数据对象中的属性值也会相应地更新。

3. 表格数据绑定：将`el-table`的`:data`属性绑定到数据对象中的表格数据数组上，这样表格会根据数组的内容动态生成行。

4. 添加按钮事件处理：为添加数据的按钮添加事件处理函数，当按钮被点击时，执行函数来将表单数据添加到表格数据数组中。

5. 清除表单：可选地，添加一个方法来清空表单输入框，以便用户可以输入新的数据。

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

<template>
  <div>
    <!-- 表单 -->
    <el-form ref="form" :model="form">
      <el-form-item label="名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <!-- 其他表单项... -->
      <el-button @click="addFormData">添加到表格</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column prop="name" label="名称"></el-table-column>
      <!-- 其他表格列... -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '', // 表单数据
        // 其他字段...
      },
      tableData: [] // 表格数据
    };
  },
  methods: {
    addFormData() {
      // 将表单数据添加到表格数据数组中
      this.tableData.push({ ...this.form });
      // 清空表单
      this.form = {
        name: '', // 清空表单字段
        // 其他字段...
      };
    }
  }
};
</script>