当前位置：首页 > VUE

vue表格实现删除功能

2026-01-23 00:54:40VUE

实现 Vue 表格删除功能的方法

基础实现（基于 Vue 2/3）
表格删除功能通常需要以下核心逻辑：

数据绑定：通过 v-for 渲染表格数据，数据源通常为数组。
删除操作：为每行添加删除按钮，触发方法移除对应数据项。

示例代码（Vue 3 Composition API）

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

<script setup>
import { ref } from 'vue';

const tableData = ref([
  { id: 1, name: '项目1' },
  { id: 2, name: '项目2' }
]);

const deleteItem = (index) => {
  tableData.value.splice(index, 1);
};
</script>

进阶优化方案

加入确认提示
通过 window.confirm 或 UI 库（如 Element UI 的 ElMessageBox）增强交互：

const deleteItem = (index) => {
  if (confirm('确定删除吗？')) {
    tableData.value.splice(index, 1);
  }
};

后端交互
若需同步后端数据，结合 axios 等库发送请求：

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

常见问题解决

动态渲染 Key 冲突
推荐使用唯一标识（如 id）而非 index 作为 v-for 的 key，避免删除后渲染异常。

性能优化
大数据量时，可使用虚拟滚动（如 vue-virtual-scroller）减少 DOM 压力。

UI 库集成示例（Element UI）

<el-table :data="tableData">
  <el-table-column prop="name" label="名称" />
  <el-table-column label="操作">
    <template #default="scope">
      <el-button @click="deleteItem(scope.$index)" type="danger">删除</el-button>
    </template>
  </el-table-column>
</el-table>

vue表格实现删除功能