vue实现多组全选

Vue 实现多组全选功能

数据准备

在 Vue 中实现多组全选功能需要为每组数据维护独立的选中状态。通常使用一个数组存储每组的数据，并为每组添加一个 selected 属性来标记是否全选。

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

实现全选逻辑

为每组添加全选功能，通过计算属性或方法判断是否所有项都被选中。

methods: {
  toggleGroupSelection(group) {
    group.selected = !group.selected
    group.items.forEach(item => {
      item.checked = group.selected
    })
  },
  updateGroupSelection(group) {
    group.selected = group.items.every(item => item.checked)
  }
}

模板绑定

在模板中使用 v-model 绑定每个选项，并调用相应的方法更新状态。

<div v-for="(group, index) in groups" :key="index">
  <label>
    <input 
      type="checkbox" 
      v-model="group.selected" 
      @change="toggleGroupSelection(group)"
    />
    {{ group.name }} (全选)
  </label>
  <div v-for="item in group.items" :key="item.id">
    <label>
      <input 
        type="checkbox" 
        v-model="item.checked" 
        @change="updateGroupSelection(group)"
      />
      {{ item.name }}
    </label>
  </div>
</div>

全局全选功能

如果需要实现一个全局全选控制所有组的全选状态，可以添加以下代码：

data() {
  return {
    selectAll: false
  }
},
methods: {
  toggleSelectAll() {
    this.selectAll = !this.selectAll
    this.groups.forEach(group => {
      group.selected = this.selectAll
      group.items.forEach(item => {
        item.checked = this.selectAll
      })
    })
  }
}

<label>
  <input 
    type="checkbox" 
    v-model="selectAll" 
    @change="toggleSelectAll"
  />
  全选所有组
</label>

注意事项

• 确保在修改单个选项时调用 updateGroupSelection 来更新组的全选状态
• 使用 v-model 时注意不要直接修改 props，应该使用组件内数据
• 对于大量数据，考虑使用计算属性优化性能

这种方法可以灵活扩展，支持任意数量的组和项，同时保持各组全选状态的独立性。