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

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

时间: 2024-09-07 14:06:49 浏览: 164

在Vue中，将`el-form`表单的数据添加到`el-table`表格通常涉及以下步骤： 1. 创建数据模型：首先定义一个Vue实例或组件的数据对象，其中包含表单数据和表格数据的数组。 2. 表单数据绑定：使用`v-model`指令将`el-form`表单的输入框绑定到数据对象的相应属性上，这样当表单输入框的值改变时，数据对象中的属性值也会相应地更新。 3. 表格数据绑定：将`el-table`的`:data`属性绑定到数据对象中的表格数据数组上，这样表格会根据数组的内容动态生成行。 4. 添加按钮事件处理：为添加数据的按钮添加事件处理函数，当按钮被点击时，执行函数来将表单数据添加到表格数据数组中。 5. 清除表单：可选地，添加一个方法来清空表单输入框，以便用户可以输入新的数据。下面是一个简单的代码示例： ```vue <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> ```

阅读全文