vue 新增table表格、新增加一行数据

在Vue中，你可以使用v-for指令来遍历行数据，并使用事件监听来添加新的数据行。以下是一个简单的例子：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in rows" :key="row.id">
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.age }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="addRow">Add Row</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      rows: [
        { id: 1, name: 'John Doe', age: 30 },
        { id: 2, name: 'Jane Smith', age: 25 },
        // ... more rows
      ],
      nextId: 3, // Assuming the highest ID in the rows array is 2
    };
  },
  methods: {
    addRow() {
      this.rows.push({
        id: this.nextId++,
        name: 'New Name',
        age: 18,
      });
    },
  },
};
</script>

在这个例子中，rows数组代表表格中的数据行。addRow方法被调用时，它将新的数据行添加到rows数组中。v-for指令用于渲染表格的行，并为每一行提供一个唯一的key属性（必须的，因为它可以提高渲染的性能）。按钮用于触发添加新行的操作。