vue2checkbox实现全选

Vue 2.x 中的 checkbox 全选功能可以通过数据绑定和事件处理来实现。假设你有一个数组 `selectedItems` 用于存储被选中的项目，可以创建一个 `v-model` 绑定的 checkbox 元素，并为其添加一个 "change" 或 "input" 事件监听器，当所有 checkbox 都被勾选时触发全选状态，反之则取消全选。

以下是一个简单的例子：

<template>
  <div>
    <label v-for="(item, index) in items" :key="index">
      <input type="checkbox"
             v-model="selectedItems[index]"
             @change="toggleSelectAll">
      {{ item }}
    </label>

    <!-- 全选复选框 -->
    <label>
      <input type="checkbox"
             v-model="selectAll"
             :disabled="!selectAllable"
             @change="toggleSelectAll">
      全选
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      selectedItems: [],
      selectAll: false,
      selectable: true, // 如果不想一开始就允许全选，可以设置为 false
    };
  },
  methods: {
    toggleSelectAll(event) {
      if (event.target.checked) { // 所有单选框都已选中
        this.selectedItems = this.items.map(item => true);
      } else { // 取消全选
        this.selectedItems = [];
      }
      
      this.selectAll = event.target.checked; // 更新全选的状态
    },
  },
};
</script>

在这个例子中，当用户点击 "全选" 复选框时，会遍历 `items` 数组并设置对应的 `selectedItems` 到true，反之则清空。注意，这里还需要检查 `selectable` 的值，以控制是否允许全选操作。