当前位置：首页 > VUE

vue批量删除实现

2026-01-15 07:22:38VUE

实现 Vue 批量删除功能

在 Vue 中实现批量删除功能通常涉及以下关键步骤：

数据绑定与选择状态管理

在组件中定义需要渲染的数据列表和选中状态：

data() {
  return {
    items: [], // 数据列表
    selectedItems: [], // 存储选中项的ID或对象
    selectAll: false // 全选状态
  }
}

渲染列表与复选框绑定

在模板中使用 v-for 渲染列表，并将复选框与选中状态绑定：

<tr v-for="item in items" :key="item.id">
  <td>
    <input 
      type="checkbox" 
      v-model="selectedItems" 
      :value="item.id"
    >
  </td>
  <td>{{ item.name }}</td>
  <!-- 其他列 -->
</tr>

实现全选功能

添加全选复选框并实现逻辑：

methods: {
  toggleSelectAll() {
    if (this.selectAll) {
      this.selectedItems = this.items.map(item => item.id)
    } else {
      this.selectedItems = []
    }
  }
}

批量删除方法实现

创建删除方法处理选中的项目：

methods: {
  batchDelete() {
    if (this.selectedItems.length === 0) {
      alert('请至少选择一项')
      return
    }

    // 调用API或本地删除
    this.$axios.delete('/api/items', {
      data: { ids: this.selectedItems }
    }).then(() => {
      // 更新本地数据
      this.items = this.items.filter(
        item => !this.selectedItems.includes(item.id)
      )
      this.selectedItems = []
    })
  }
}

优化用户体验

添加确认对话框防止误操作：

async batchDelete() {
  if (this.selectedItems.length === 0) return

  try {
    const confirmed = await this.$confirm(
      '确定要删除选中的项目吗？',
      '提示',
      { type: 'warning' }
    )

    if (confirmed) {
      // 执行删除逻辑
    }
  } catch (error) {
    console.log('取消删除')
  }
}

服务器端实现

Node.js 示例处理批量删除请求：

router.delete('/items', async (req, res) => {
  try {
    const { ids } = req.body
    await Item.deleteMany({ _id: { $in: ids } })
    res.sendStatus(204)
  } catch (error) {
    res.status(500).json({ error })
  }
})

前端组件完整示例

<template>
  <div>
    <button @click="batchDelete" :disabled="!selectedItems.length">
      批量删除 ({{ selectedItems.length }})
    </button>

    <table>
      <thead>
        <tr>
          <th>
            <input 
              type="checkbox" 
              v-model="selectAll"
              @change="toggleSelectAll"
            >
          </th>
          <th>名称</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>
            <input 
              type="checkbox" 
              v-model="selectedItems" 
              :value="item.id"
            >
          </td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    toggleSelectAll() {
      this.selectedItems = this.selectAll 
        ? this.items.map(item => item.id) 
        : []
    },
    async batchDelete() {
      if (!this.selectedItems.length) return

      try {
        await this.$axios.delete('/api/items', {
          data: { ids: this.selectedItems }
        })
        this.items = this.items.filter(
          item => !this.selectedItems.includes(item.id)
        )
        this.selectedItems = []
      } catch (error) {
        console.error(error)
      }
    }
  },
  async created() {
    this.items = await this.$axios.get('/api/items')
  }
}
</script>