vue2.0做批量删除

在 Vue 2.0 中，可以通过以下步骤实现批量删除：

1. 首先，需要在 Vue 实例中定义一个数组，用于存储要删除的数据。可以定义一个名为 `selectedItems` 的数组。

data() {
  return {
    selectedItems: []
    // 其他数据
  }
}

2. 在页面中，需要为每个要删除的数据项添加一个复选框，以便用户选择要删除的数据。可以使用 `v-model` 指令将复选框的选中状态与 `selectedItems` 数组中的对应项绑定起来。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <input type="checkbox" v-model="selectedItems" :value="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="deleteSelectedItems">删除选中项</button>
  </div>
</template>

3. 在 `deleteSelectedItems` 方法中，遍历 `selectedItems` 数组，将每个选中的数据项从数据源中删除。可以使用 `splice` 方法。

methods: {
  deleteSelectedItems() {
    for (let i = 0; i < this.selectedItems.length; i++) {
      const index = this.items.findIndex(item => item.id === this.selectedItems[i])
      if (index !== -1) {
        this.items.splice(index, 1)
      }
    }
    this.selectedItems = [] // 删除完成后清空选中状态
  }
}

4. 最后，需要对删除按钮进行禁用处理，以防止用户在没有选中任何数据时误操作。可以使用计算属性 `hasSelectedItems` 判断 `selectedItems` 数组是否为空，并将其绑定到删除按钮的 `disabled` 属性上。

computed: {
  hasSelectedItems() {
    return this.selectedItems.length > 0
  }
}

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <input type="checkbox" v-model="selectedItems" :value="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="deleteSelectedItems" :disabled="!hasSelectedItems">删除选中项</button>
  </div>
</template>

这样就可以实现批量删除了。