当前位置：首页 > VUE

vue实现表格删除

2026-01-18 23:26:07VUE

Vue 实现表格删除功能

在 Vue 中实现表格删除功能，通常需要结合数据绑定和事件处理。以下是一个完整的实现方法：

模板部分

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <button @click="deleteItem(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' }
      ]
    }
  },
  methods: {
    deleteItem(id) {
      this.tableData = this.tableData.filter(item => item.id !== id)
    }
  }
}
</script>

实现原理

使用 v-for 指令循环渲染表格数据
为每个删除按钮绑定 deleteItem 方法
在方法中使用 filter 过滤掉要删除的项
更新后的数据会自动触发视图重新渲染

扩展功能

如果需要添加确认对话框：

methods: {
  deleteItem(id) {
    if(confirm('确定要删除此项吗？')) {
      this.tableData = this.tableData.filter(item => item.id !== id)
    }
  }
}

如果需要从服务器删除：

methods: {
  async deleteItem(id) {
    try {
      await axios.delete(`/api/items/${id}`)
      this.tableData = this.tableData.filter(item => item.id !== id)
    } catch (error) {
      console.error('删除失败', error)
    }
  }
}