当前位置：首页 > VUE

vue实现表格批量删除

2026-02-21 06:47:57VUE

Vue 实现表格批量删除的方法

基础实现思路

在 Vue 中实现表格批量删除功能，通常需要以下几个核心步骤：

表格数据渲染
复选框绑定与选中状态管理
批量删除逻辑处理

具体实现代码示例

模板部分

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll"></th>
          <th>ID</th>
          <th>名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td><input type="checkbox" v-model="selectedItems" :value="item.id"></td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td><button @click="deleteSingle(item.id)">删除</button></td>
        </tr>
      </tbody>
    </table>
    <button @click="deleteMultiple" :disabled="!selectedItems.length">批量删除</button>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    toggleSelectAll() {
      if (this.selectAll) {
        this.selectedItems = this.tableData.map(item => item.id)
      } else {
        this.selectedItems = []
      }
    },
    deleteSingle(id) {
      this.tableData = this.tableData.filter(item => item.id !== id)
    },
    deleteMultiple() {
      this.tableData = this.tableData.filter(
        item => !this.selectedItems.includes(item.id)
      )
      this.selectedItems = []
      this.selectAll = false
    }
  }
}
</script>

进阶优化建议

API 集成 在实际项目中，通常需要与后端 API 交互。可以将删除方法修改为异步操作：

async deleteMultiple() {
  try {
    await axios.delete('/api/items', { data: { ids: this.selectedItems } })
    this.tableData = this.tableData.filter(
      item => !this.selectedItems.includes(item.id)
    )
    this.selectedItems = []
  } catch (error) {
    console.error('删除失败:', error)
  }
}

状态管理 对于大型应用，建议使用 Vuex 管理选中状态和表格数据：

// 在 store 中定义 mutations
mutations: {
  REMOVE_ITEMS(state, ids) {
    state.tableData = state.tableData.filter(item => !ids.includes(item.id))
  }
}

// 组件中调用
this.$store.commit('REMOVE_ITEMS', this.selectedItems)

用户体验优化

vue实现表格批量删除