当前位置：首页 > VUE

vue实现删除选定行

2026-02-22 14:28:43VUE

实现删除选定行的基本思路

在Vue中删除选定行通常涉及以下核心逻辑：维护一个数据数组，通过v-for渲染列表，为每行添加选择功能（如复选框），最后通过方法过滤已选数据实现删除。以下是具体实现方式：

数据准备与列表渲染

定义数据数组和选中项的存储变量：

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

使用v-for渲染表格，并为每行添加复选框：

vue实现删除选定行

<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>

在methods中实现删除逻辑：

vue实现删除选定行

methods: {
  deleteSelected() {
    this.items = this.items.filter(
      item => !this.selectedItems.includes(item.id)
    )
    this.selectedItems = [] // 清空选中状态
  }
}

增强用户体验（可选）

添加全选/取消全选功能：

data() {
  return {
    selectAll: false
  }
},
methods: {
  toggleSelectAll() {
    this.selectedItems = this.selectAll 
      ? this.items.map(item => item.id) 
      : []
  }
}

对应的模板部分：

<input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
<label>全选</label>

使用计算属性优化

对于大型数据集，可以使用计算属性提高性能：

computed: {
  selectedIdsSet() {
    return new Set(this.selectedItems)
  }
},
methods: {
  deleteSelected() {
    this.items = this.items.filter(
      item => !this.selectedIdsSet.has(item.id)
    )
  }
}

完整组件示例

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
    <label>全选</label>

    <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" :disabled="!selectedItems.length">
      删除选中项
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    deleteSelected() {
      this.items = this.items.filter(
        item => !this.selectedItems.includes(item.id)
      )
      this.selectedItems = []
      this.selectAll = false
    },
    toggleSelectAll() {
      this.selectedItems = this.selectAll 
        ? this.items.map(item => item.id) 
        : []
    }
  }
}
</script>

以上实现方式适用于大多数Vue 2.x和3.x项目，可根据实际需求调整数据结构和样式。对于更复杂的场景，可以考虑使用Vuex管理状态或第三方表格组件如Element UI的el-table等。

标签: vue