当前位置：首页 > VUE

vue实现删除选定行

2026-01-21 23:24:06VUE

Vue 实现删除选定行

在 Vue 中删除表格或列表中的选定行，通常涉及以下步骤：绑定数据、监听选择事件、实现删除逻辑。以下是具体实现方法。

数据绑定与渲染

使用 v-for 渲染列表数据，并为每行绑定唯一标识（如 id）。示例代码如下：

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedItems: [] // 存储选中的行ID
    };
  }
};
</script>

删除逻辑实现

通过 Array.filter() 或 splice 删除选中的行。在 methods 中定义删除方法：

vue实现删除选定行

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

优化与注意事项

多选处理：若需支持全选，可添加一个“全选”复选框，通过计算属性动态绑定：
```
<input type="checkbox" v-model="selectAll" @change="toggleAll">
```
性能考虑：对于大数据量，使用 key 绑定唯一标识以优化渲染效率。

确认提示：添加删除前的确认提示，避免误操作：

deleteSelected() {
  if (confirm('确认删除选中项？')) {
    // 执行删除逻辑
  }
}

完整示例

结合上述内容，完整组件代码如下：

<template>
  <div>
    <table>
      <tr v-for="item in list" :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 {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedItems: []
    };
  },
  methods: {
    deleteSelected() {
      if (this.selectedItems.length === 0) return;
      if (confirm('确认删除选中项？')) {
        this.list = this.list.filter(item => 
          !this.selectedItems.includes(item.id)
        );
        this.selectedItems = [];
      }
    }
  }
};
</script>

通过以上方法，可以高效实现 Vue 中删除选定行的功能。

标签: vue