当前位置：首页 > VUE

vue实现表格添加删除

2026-02-23 03:12:50VUE

Vue 实现表格添加与删除功能

在Vue中实现表格的添加和删除功能，通常涉及数据绑定、事件处理和动态渲染。以下是具体实现方法：

数据准备

定义表格数据数组和表单输入绑定的数据对象：

data() {
  return {
    tableData: [
      { id: 1, name: '张三', age: 25 },
      { id: 2, name: '李四', age: 30 }
    ],
    form: {
      name: '',
      age: ''
    },
    nextId: 3
  }
}

添加功能实现

创建添加数据的方法，将表单数据推送到表格数组中：

methods: {
  addItem() {
    if (!this.form.name || !this.form.age) return

    this.tableData.push({
      id: this.nextId++,
      name: this.form.name,
      age: Number(this.form.age)
    })

    this.form.name = ''
    this.form.age = ''
  }
}

模板部分绑定表单和添加按钮：

<div>
  <input v-model="form.name" placeholder="姓名">
  <input v-model="form.age" placeholder="年龄" type="number">
  <button @click="addItem">添加</button>
</div>

删除功能实现

创建删除方法，通过过滤或splice移除指定项：

methods: {
  deleteItem(id) {
    this.tableData = this.tableData.filter(item => item.id !== id)
    // 或使用splice：
    // const index = this.tableData.findIndex(item => item.id === id)
    // this.tableData.splice(index, 1)
  }
}

模板中为每行添加删除按钮：

<table>
  <tr v-for="item in tableData" :key="item.id">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
    <td>
      <button @click="deleteItem(item.id)">删除</button>
    </td>
  </tr>
</table>

完整组件示例

<template>
  <div>
    <div>
      <input v-model="form.name" placeholder="姓名">
      <input v-model="form.age" placeholder="年龄" type="number">
      <button @click="addItem">添加</button>
    </div>

    <table>
      <tr v-for="item in tableData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <button @click="deleteItem(item.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ],
      form: {
        name: '',
        age: ''
      },
      nextId: 3
    }
  },
  methods: {
    addItem() {
      if (!this.form.name || !this.form.age) return

      this.tableData.push({
        id: this.nextId++,
        name: this.form.name,
        age: Number(this.form.age)
      })

      this.form.name = ''
      this.form.age = ''
    },
    deleteItem(id) {
      this.tableData = this.tableData.filter(item => item.id !== id)
    }
  }
}
</script>