vue后台管理系统批量删除商品

您好！针对您的问题，如果您使用的是Vue框架进行开发，可以按照以下步骤进行批量删除商品：

1. 创建一个复选框组件，让用户可以选择要删除的商品。
2. 在Vue组件中，使用v-model指令将复选框的值绑定到组件的数据对象中。
3. 创建一个删除按钮，并在点击时触发一个方法。
4. 在该方法中，使用axios或其他HTTP库向后端发送请求，将选中的商品ID发送到后端进行删除。

下面是一个示例代码：

<template>
  <div>
    <table>
      <thead>
        <th>
          <input type="checkbox" v-model="allChecked" @change="checkAll"/>
        </th>
        <th>ID</th>
        <th>商品名称</th>
        <th>价格</th>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>
            <input type="checkbox" v-model="checkedIds" :value="item.id"/>
          </td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="deleteSelected">删除选中商品</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      checkedIds: [],
      allChecked: false
    }
  },
  created() {
    // 获取商品列表
    this.fetchItems();
  },
  methods: {
    fetchItems() {
      // 发送HTTP请求获取商品列表
      axios.get('/api/items').then(response => {
        this.items = response.data;
      });
    },
    checkAll() {
      // 全选/取消全选
      this.checkedIds = this.allChecked ? this.items.map(item => item.id) : [];
    },
    deleteSelected() {
      // 删除选中商品
      axios.post('/api/delete-items', { ids: this.checkedIds }).then(() => {
        // 删除成功后重新获取商品列表
        this.fetchItems();
      });
    }
  }
}
</script>

在这个示例中，我们通过v-model指令将复选框的值绑定到了checkedIds数组中，当用户点击删除按钮时，会发送一个POST请求到后端，将选中的商品ID传递给后端进行删除。在删除成功后，我们重新获取商品列表，让用户看到最新的数据。