vue 写一个动态新增一行的提交表格，格式类似exsl表格

在Vue.js中创建一个动态增删行的表格，可以利用v-for循环和数组操作来实现类似Excel表格的功能。首先，你需要定义一个数据模型（例如`tableData`），它是一个数组，每一项代表表格的一行。

<template>
  <div class="dynamic-table">
    <table>
      <thead>
        <tr>
          <!-- 表头列 -->
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, rowIndex) in tableData" :key="rowIndex">
          <td v-for="(cellValue, cellIndex) in item" :key="cellIndex">{{ cellValue }}</td>
        </tr>
        <!-- 新增行按钮 -->
        <tr @click="addRow">
          <td v-for="(header, index) in headers" :key="index"><input type="text" v-model="newRowValues[index]"></td>
        </tr>
      </tbody>
    </table>
    <!-- 提交按钮 -->
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headers: ['Header 1', 'Header 2', 'Header 3'], // 根据实际需求设置表头
      tableData: [], // 初始数据为空数组
      newRowValues: [] // 新行初始值
    };
  },
  methods: {
    addRow() {
      this.tableData.push(this.newRowValues.slice()); // 拷贝新行值到tableData中
      this.newRowValues = []; // 清空新行值以便添加下一行
    },
    submitForm() {
      // 这里可以根据需要处理表单数据，比如发送请求等
      console.log('表格数据:', this.tableData);
      // 如果你想保存数据至服务器或其他地方，记得在这里添加相应的API调用
    }
  }
};
</script>

在这个例子中，用户点击新增行按钮会复制`newRowValues`数组的内容并追加到`tableData`中。提交按钮用于处理整个表格的数据。记得根据你的实际需求调整`headers`和数据处理部分。