vue实现多项删除

Vue 实现多项删除的方法

使用 v-model 绑定选中项

在表格或列表中，为每一项添加复选框，并使用 v-model 绑定到一个数组，用于存储选中的项。

<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: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    }
  },
  methods: {
    deleteSelected() {
      this.items = this.items.filter(item => !this.selectedItems.includes(item.id));
      this.selectedItems = [];
    }
  }
}
</script>

使用事件处理选中状态

如果不希望使用 v-model，可以通过手动管理选中状态来实现。

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td><input type="checkbox" @change="toggleSelection(item.id)"></td>
        <td>{{ item.name }}</td>
      </tr>
    </table>
    <button @click="deleteSelected">删除选中项</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: []
    }
  },
  methods: {
    toggleSelection(id) {
      const index = this.selectedItems.indexOf(id);
      if (index === -1) {
        this.selectedItems.push(id);
      } else {
        this.selectedItems.splice(index, 1);
      }
    },
    deleteSelected() {
      this.items = this.items.filter(item => !this.selectedItems.includes(item.id));
      this.selectedItems = [];
    }
  }
}
</script>

使用 Vuex 管理状态

如果项目中使用 Vuex 进行状态管理，可以将选中项和删除逻辑放在 Vuex 中。

// store.js
export default new Vuex.Store({
  state: {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ],
    selectedItems: []
  },
  mutations: {
    toggleSelection(state, id) {
      const index = state.selectedItems.indexOf(id);
      if (index === -1) {
        state.selectedItems.push(id);
      } else {
        state.selectedItems.splice(index, 1);
      }
    },
    deleteSelected(state) {
      state.items = state.items.filter(item => !state.selectedItems.includes(item.id));
      state.selectedItems = [];
    }
  }
});

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

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['items', 'selectedItems'])
  },
  methods: {
    ...mapMutations(['toggleSelection', 'deleteSelected'])
  }
}
</script>

使用第三方 UI 库

如果使用 Element UI 或 Ant Design Vue 等第三方库，可以利用其提供的表格组件实现多项删除。

<template>
  <el-table
    :data="items"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
  </el-table>
  <el-button @click="deleteSelected">删除选中项</el-button>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedItems = val;
    },
    deleteSelected() {
      const selectedIds = this.selectedItems.map(item => item.id);
      this.items = this.items.filter(item => !selectedIds.includes(item.id));
      this.selectedItems = [];
    }
  }
}
</script>

以上方法可以根据项目需求选择适合的实现方式。