Vue实现一个动态添加行的表格？

  在Vue中实现一个动态添加行的表格可以通过以下步骤来完成，如下所示。

步骤 1：设置表格的数据模型

  在Vue组件中定义表格的数据模型，通常使用一个数组来存储表格的数据。每一行数据可以是一个对象，对象的属性对应表格的列。

data() {
  return {
    tableData: [
      { id: 1, name: 'John', age: 30 },
      { id: 2, name: 'Doe', age: 25 }
    ],
    newRow: { id: null, name: '', age: null } // 新添加行的初始数据
  };
},

步骤 2：渲染表格

  在Vue模板中使用v-for指令遍历表格数据，渲染表格的行和列。

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </tbody>
</table>

步骤 3：添加行功能

  在模板中添加一个按钮，通过点击按钮触发添加新行的功能。

<button @click="addRow">Add Row</button>

  在Vue方法中实现添加行的逻辑。

methods: {
  addRow() {
    // 添加新行数据到表格数据数组
    this.tableData.push(Object.assign({}, this.newRow));
  }
}

完整示例代码

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="addRow">Add Row</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 30 },
        { id: 2, name: 'Doe', age: 25 }
      ],
      newRow: { id: null, name: '', age: null } // 新添加行的初始数据
    };
  },
  methods: {
    addRow() {
      // 添加新行数据到表格数据数组
      this.tableData.push(Object.assign({}, this.newRow));
    }
  }
};
</script>

  这样就实现了一个简单的Vue表格，可以通过点击按钮动态添加行。在实际应用中，你可以根据需求进行扩展，例如支持行的编辑、删除功能，或者根据用户输入动态更新新行的数据等。