vue input checkBox 制作一个批量处理

您可以通过以下步骤来实现 Vue input checkbox 的批量处理：

1. 在 Vue 模板中，使用 `v-model` 指令来创建一个 checkbox，并使用 `v-for` 指令循环渲染多个 checkbox。

<template>
  <div>
    <input type="checkbox" v-model="checkAll"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id">{{ item.name }}
    </div>
    <button @click="batchHandle">批量处理</button>
  </div>
</template>

2. 在 Vue 实例中，定义一个 `items` 数组用于存储所有的选项，定义一个 `selectedItems` 数组用于存储选中的选项。

export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' },
      ],
      selectedItems: [],
      checkAll: false,
    };
  },
};

3. 监听全选 checkbox 的点击事件，然后将其他 checkbox 的选中状态与它保持一致。

export default {
  data() {
    return {
      // ...
    };
  },
  watch: {
    checkAll(newValue) {
      this.selectedItems = newValue ? this.items.map((item) => item.id) : [];
    },
  },
};

4. 在处理批量操作时，直接使用 `selectedItems` 数组即可得到所有选中的选项。

export default {
  data() {
    return {
      // ...
    };
  },
  methods: {
    batchHandle() {
      console.log('选中的项：', this.selectedItems);
      // 在这里执行批量操作，例如发送选中项到后台
    },
  },
};

通过以上步骤，您可以实现 Vue input checkbox 的批量处理功能。