当前位置：首页 > VUE

vue实现多远删除

2026-01-17 15:20:01VUE

实现 Vue 多选删除功能

数据准备 在 Vue 组件中定义一个数组存储数据和一个数组存储选中的项

data() {
  return {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ],
    selectedItems: []
  }
}

模板部分 使用 v-model 绑定复选框选择状态

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

删除方法实现

methods: {
  deleteSelected() {
    this.items = this.items.filter(
      item => !this.selectedItems.includes(item.id)
    )
    this.selectedItems = []
  }
}

使用 Vuex 管理状态

Store 配置

const store = new Vuex.Store({
  state: {
    items: [...],
    selectedItems: []
  },
  mutations: {
    DELETE_SELECTED(state) {
      state.items = state.items.filter(
        item => !state.selectedItems.includes(item.id)
      )
      state.selectedItems = []
    }
  }
})

组件调用

methods: {
  deleteSelected() {
    this.$store.commit('DELETE_SELECTED')
  }
}

批量删除 API 调用

与后端交互

async deleteSelected() {
  try {
    await 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)
  }
}

全选/反选功能扩展

添加全选复选框

<input 
  type="checkbox" 
  v-model="allSelected"
  @change="toggleAll"
>
全选

全选逻辑实现

vue实现多远删除

computed: {
  allSelected: {
    get() {
      return this.selectedItems.length === this.items.length
    },
    set(value) {
      this.selectedItems = value 
        ? this.items.map(item => item.id) 
        : []
    }
  }
}