vue实现多个全选

实现多个全选功能

在Vue中实现多个全选功能通常涉及管理多个复选框组的状态。以下是一个完整的实现方案：

数据准备

定义包含多个复选框组的数据结构，每个组包含独立的选项列表和全选状态：

data() {
  return {
    groups: [
      {
        name: 'Group 1',
        allSelected: false,
        items: [
          { id: 1, name: 'Item 1', selected: false },
          { id: 2, name: 'Item 2', selected: false }
        ]
      },
      {
        name: 'Group 2',
        allSelected: false,
        items: [
          { id: 3, name: 'Item 3', selected: false },
          { id: 4, name: 'Item 4', selected: false }
        ]
      }
    ]
  }
}

全选逻辑实现

为每个组添加全选/取消全选功能：

methods: {
  toggleSelectAll(group) {
    group.allSelected = !group.allSelected
    group.items.forEach(item => {
      item.selected = group.allSelected
    })
  }
}

单个选择影响全选状态

当手动选择单个项目时，需要检查是否应该更新全选状态：

methods: {
  updateSelectAllStatus(group) {
    group.allSelected = group.items.every(item => item.selected)
  }
}

模板实现

在模板中绑定这些方法和状态：

<div v-for="(group, index) in groups" :key="index">
  <h3>{{ group.name }}</h3>
  <label>
    <input 
      type="checkbox" 
      v-model="group.allSelected"
      @change="toggleSelectAll(group)"
    >
    全选
  </label>

  <div v-for="item in group.items" :key="item.id">
    <label>
      <input 
        type="checkbox" 
        v-model="item.selected"
        @change="updateSelectAllStatus(group)"
      >
      {{ item.name }}
    </label>
  </div>
</div>

获取选中结果

添加方法获取所有被选中的项目：

methods: {
  getSelectedItems() {
    return this.groups.flatMap(group => 
      group.items.filter(item => item.selected)
    )
  }
}

优化性能

对于大型列表，可以使用计算属性来优化性能：

computed: {
  selectedItems() {
    return this.groups.flatMap(group => 
      group.items.filter(item => item.selected)
    )
  }
}

完整组件示例

将上述代码整合成一个完整组件：

<template>
  <div>
    <div v-for="(group, index) in groups" :key="index">
      <h3>{{ group.name }}</h3>
      <label>
        <input 
          type="checkbox" 
          v-model="group.allSelected"
          @change="toggleSelectAll(group)"
        >
        全选
      </label>

      <div v-for="item in group.items" :key="item.id">
        <label>
          <input 
            type="checkbox" 
            v-model="item.selected"
            @change="updateSelectAllStatus(group)"
          >
          {{ item.name }}
        </label>
      </div>
    </div>

    <button @click="logSelected">获取选中项</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      groups: [
        {
          name: 'Group 1',
          allSelected: false,
          items: [
            { id: 1, name: 'Item 1', selected: false },
            { id: 2, name: 'Item 2', selected: false }
          ]
        },
        {
          name: 'Group 2',
          allSelected: false,
          items: [
            { id: 3, name: 'Item 3', selected: false },
            { id: 4, name: 'Item 4', selected: false }
          ]
        }
      ]
    }
  },
  methods: {
    toggleSelectAll(group) {
      group.allSelected = !group.allSelected
      group.items.forEach(item => {
        item.selected = group.allSelected
      })
    },
    updateSelectAllStatus(group) {
      group.allSelected = group.items.every(item => item.selected)
    },
    logSelected() {
      console.log(this.selectedItems)
    }
  },
  computed: {
    selectedItems() {
      return this.groups.flatMap(group => 
        group.items.filter(item => item.selected)
      )
    }
  }
}
</script>

这个实现方案可以轻松扩展到任意数量的复选框组，每个组保持独立的全选状态，同时提供便捷的方法获取所有被选中的项目。