当前位置：首页 > VUE

vue实现多项删除

2026-02-19 09:04:53VUE

Vue实现多项删除的方法

使用v-model绑定选中状态

在表格或列表中，为每个项目添加复选框，使用v-model绑定选中状态。通过一个数组存储选中的项目ID，点击删除按钮时提交该数组。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ],
      selectedItems: []
    }
  },
  methods: {
    deleteSelected() {
      this.items = this.items.filter(item => !this.selectedItems.includes(item.id))
      this.selectedItems = []
    }
  }
}
</script>

使用Element UI等UI框架

如果使用Element UI，可以利用其表格组件的多选功能实现更完善的多项删除。

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>
  <el-button @click="deleteSelected">批量删除</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteSelected() {
      const ids = this.multipleSelection.map(item => item.id)
      this.tableData = this.tableData.filter(item => !ids.includes(item.id))
    }
  }
}
</script>

与后端API交互

实际项目中通常需要调用后端API删除数据，使用axios发送删除请求。

methods: {
  async deleteSelected() {
    const ids = this.selectedItems
    try {
      await this.$http.delete('/api/items', { data: { ids } })
      this.items = this.items.filter(item => !ids.includes(item.id))
      this.selectedItems = []
    } catch (error) {
      console.error('删除失败', error)
    }
  }
}

添加确认提示

为避免误操作，可以添加确认对话框。

vue实现多项删除

methods: {
  deleteSelected() {
    this.$confirm('确定要删除选中项吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 删除逻辑
    }).catch(() => {
      this.$message.info('已取消删除')
    })
  }
}