vue 表格 增加删除行

要实现 Vue 表格的增加和删除行，可以使用 Vue 的数据绑定功能和数组操作方法。

首先，需要在 Vue 实例中定义一个数组，用于存储表格数据。例如：

data() {
  return {
    tableData: [
      { id: 1, name: '张三', age: 20 },
      { id: 2, name: '李四', age: 22 },
      { id: 3, name: '王五', age: 25 }
    ]
  }
}

然后，在表格中使用 v-for 指令将数组中的每一项渲染成一行。例如：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in tableData" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>
        <button @click="deleteRow(index)">删除</button>
      </td>
    </tr>
  </tbody>
</table>

注意，在每一行中都需要添加一个删除按钮，并且绑定一个点击事件，调用 deleteRow 方法来删除该行。deleteRow 方法的实现如下：

methods: {
  deleteRow(index) {
    this.tableData.splice(index, 1);
  }
}

这里使用了数组的 splice 方法来删除指定位置的元素。

如果要添加一行新数据，可以在界面上添加一个“添加”按钮，并绑定一个点击事件，调用 addRow 方法来添加新数据。addRow 方法的实现如下：

methods: {
  addRow() {
    this.tableData.push({ id: 4, name: '赵六', age: 18 });
  }
}

这里使用了数组的 push 方法来将新数据添加到数组的末尾。当然，实际情况中可能需要根据用户输入或其他条件来动态生成新数据。