vue动态表格行的新增

在Vue中，可以通过v-for指令和响应式数据来实现动态表格行的新增。以下是一种实现方式：

首先，在Vue组件的data选项中定义一个数组（比如叫做tableData），用于存储表格的数据。这个数组的初始值可以为空，也可以包含一些默认的表格行数据。

然后，在template中，使用v-for指令遍历tableData数组，将每个元素渲染成表格的一行。例如：

<table>
  <tr v-for="item in tableData" :key="item.id">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
    <!-- 其他列的数据 -->
  </tr>
</table>

接下来，当需要新增表格行时，可以通过点击按钮或其他交互方式来触发一个方法（比如叫做addTableRow），在这个方法中向tableData数组中添加一个新的行数据。例如：

<button @click="addTableRow">新增表格行</button>

...

methods: {
  addTableRow() {
    // 创建一个新的行数据对象
    const newTableRow = {
      id: this.tableData.length + 1,
      name: '',
      age: 0,
      // 其他列的数据
    };

    // 向tableData数组添加新的行数据
    this.tableData.push(newTableRow);
  }
}

在上述代码中，addTableRow方法会创建一个新的行数据对象，并将其添加到tableData数组中。由于tableData是响应式的，所以当数组发生变化时，表格的视图会自动更新，新增的行会被渲染出来。

以上就是使用Vue实现动态表格行新增的一个简单示例。当点击新增按钮时，会动态地添加一行空白的表格行。你可以根据实际需求来修改和扩展这个示例。