vue3批量删除传参

在 Vue 3 中，批量删除数据通常涉及到数组操作。如果你想通过组件内部处理数据并进行批量删除，可以使用 `map` 函数配合 `delete` 关键字来实现。假设有一个 `items` 数组，你可以创建一个方法接收一个数组作为参数，表示需要删除的索引列表：

// 定义组件内的方法
methods: {
  deleteItems(indices) {
    indices.forEach(index => {
      if (index >= 0 && index < this.items.length) {
        // 确保索引有效并防止数组越界
        this.items.splice(index, 1);
      }
    });
  },
},

然后在模板中调用这个方法，传递你想要删除的索引数组：

<!-- 模板部分 -->
<template>
  <button @click="deleteItems(toDeleteIndices)">批量删除</button>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
      <!-- 提供一个可以点击删除的元素，例如按钮 -->
      <button @click="$emit('delete', index)">删除</button>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';
const items = ref([]);

// 示例：监听来自父组件的 delete 事件来更新要删除的索引数组
const toDeleteIndices = ref([]);
const onDelete = (index) => {
  toDeleteIndices.value.push(index);
};
</script>

在这个例子中，当用户单击“删除”按钮时，会触发 `onDelete` 方法将当前项的索引添加到 `toDeleteIndices`，然后在父组件或全局的地方处理批量删除。