vue+axios实现批量删除

好的，下面是一个实现批量删除的示例代码：

<template>
  <div>
    <button @click="deleteSelected">批量删除</button>
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="selectAll"></th>
          <th>ID</th>
          <th>名称</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.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <button @click="deleteItem(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: [],
      selectedItems: [],
      selectAll: false
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios.get('/api/items').then(res => {
        this.items = res.data
      })
    },
    deleteItem(id) {
      axios.delete(`/api/items/${id}`).then(() => {
        this.fetchData()
      })
    },
    deleteSelected() {
      axios.delete('/api/items', {
        data: { ids: this.selectedItems }
      }).then(() => {
        this.selectedItems = []
        this.selectAll = false
        this.fetchData()
      })
    }
  },
  watch: {
    selectAll(val) {
      if (val) {
        this.selectedItems = this.items.map(item => item.id)
      } else {
        this.selectedItems = []
      }
    }
  }
}
</script>

这个示例代码假设你已经有一个 `/api/items` 接口可以获取所有的项，并且可以通过 DELETE 方法来删除一个或多个项。其中，`selectedItems` 是一个数组，存储了当前选中的项的 ID，`selectAll` 是一个布尔值，表示是否选中了所有项。在 `deleteSelected` 方法中，我们使用了 axios 的 `delete` 方法，将选中的项的 ID 作为参数传递给后端。注意，在这里我们使用了 `data` 选项来指定传递的数据，而不是使用 `params` 选项。这是因为在 RESTful API 设计中，使用 DELETE 方法删除资源时，应该将要删除的资源的标识符放在请求的正文中，而不是放在 URL 的参数中。