vue3+element Plus实现在table中增加一条表单数据

在Vue 3和Element Plus中，你可以使用el-table组件来展示表格数据，并结合el-form组件来增加一条新的表单数据。以下是一个简单的例子：

<template>
  <el-form :model="newForm" ref="newFormRef" label-width="80px">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-button @click="addNewData">新增</el-button>
  </el-form>
</template>
 
<script setup>
import { ref } from 'vue';
 
const newForm = ref({
  date: '',
  name: '',
  address: ''
});
 
const tableData = ref([
  { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
  // ... 更多数据
]);
 
const addNewData = () => {
  tableData.value.push({ ...newForm.value });
  // 清空表单
  newForm.value = { date: '', name: '', address: '' };
};
</script>

在这个例子中，我们定义了一个newForm用于收集新数据的表单数据，一个tableData用于展示表格数据的数组，以及一个addNewData方法用于将新数据添加到tableData数组并清空表单。点击按钮时，会触发addNewData方法，从而在表格中添加一条新的数据记录。