当前位置：首页 > VUE

vue实现多远删除

2026-02-18 07:52:27VUE

Vue 实现多选删除功能

在 Vue 中实现多选删除功能通常涉及以下几个关键步骤：数据绑定、复选框处理、删除逻辑实现。以下是具体实现方法：

数据准备与绑定

需要准备一个数组存储数据，并为每条数据添加选中状态属性。例如：

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

渲染列表与复选框

使用 v-for 渲染列表，并通过 v-model 绑定复选框的选中状态：

<ul>
  <li v-for="item in items" :key="item.id">
    <input type="checkbox" v-model="item.selected">
    {{ item.name }}
  </li>
</ul>

实现删除逻辑

通过计算属性或方法筛选出已选中的项，并在删除时过滤掉这些项：

methods: {
  deleteSelected() {
    this.items = this.items.filter(item => !item.selected)
  }
}

在模板中添加删除按钮：

<button @click="deleteSelected">Delete Selected</button>

全选/取消全选功能（可选）

添加一个“全选”复选框，用于快速选择或取消所有项：

computed: {
  allSelected: {
    get() {
      return this.items.every(item => item.selected)
    },
    set(value) {
      this.items.forEach(item => item.selected = value)
    }
  }
}

模板中添加全选复选框：

<input type="checkbox" v-model="allSelected"> Select All

完整示例代码

<template>
  <div>
    <input type="checkbox" v-model="allSelected"> Select All
    <ul>
      <li v-for="item in items" :key="item.id">
        <input type="checkbox" v-model="item.selected">
        {{ item.name }}
      </li>
    </ul>
    <button @click="deleteSelected">Delete Selected</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', selected: false },
        { id: 2, name: 'Item 2', selected: false },
        { id: 3, name: 'Item 3', selected: false }
      ]
    }
  },
  computed: {
    allSelected: {
      get() {
        return this.items.every(item => item.selected)
      },
      set(value) {
        this.items.forEach(item => item.selected = value)
      }
    }
  },
  methods: {
    deleteSelected() {
      this.items = this.items.filter(item => !item.selected)
    }
  }
}
</script>