vue实现多组全选

Vue 实现多组全选功能

在 Vue 中实现多组全选功能通常涉及以下步骤：

数据准备

• 定义多组数据，每组包含多个选项和一个全选状态。
• 使用 v-model 绑定每个选项的选中状态。

全选逻辑

• 为每组数据添加一个全选复选框。
• 监听全选复选框的变化，更新该组所有选项的选中状态。
• 监听单个选项的变化，更新该组的全选状态。

示例代码

<template>
  <div v-for="(group, groupIndex) in groups" :key="groupIndex">
    <label>
      <input 
        type="checkbox" 
        v-model="group.selectAll" 
        @change="toggleSelectAll(groupIndex)"
      />
      全选
    </label>
    <div v-for="(item, itemIndex) in group.items" :key="itemIndex">
      <label>
        <input 
          type="checkbox" 
          v-model="item.checked" 
          @change="updateSelectAll(groupIndex)"
        />
        {{ item.name }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      groups: [
        {
          selectAll: false,
          items: [
            { name: '选项1', checked: false },
            { name: '选项2', checked: false },
            { name: '选项3', checked: false }
          ]
        },
        {
          selectAll: false,
          items: [
            { name: '选项A', checked: false },
            { name: '选项B', checked: false },
            { name: '选项C', checked: false }
          ]
        }
      ]
    }
  },
  methods: {
    toggleSelectAll(groupIndex) {
      const group = this.groups[groupIndex]
      group.items.forEach(item => {
        item.checked = group.selectAll
      })
    },
    updateSelectAll(groupIndex) {
      const group = this.groups[groupIndex]
      group.selectAll = group.items.every(item => item.checked)
    }
  }
}
</script>

优化建议

• 对于大量数据，考虑使用计算属性缓存全选状态。
• 可以封装为可复用的组件，通过 props 传入不同组的数据。
• 使用 Vuex 管理状态，如果项目复杂度较高。

注意事项

• 确保 v-model 绑定的数据是响应式的。
• 避免直接修改数组索引，使用 Vue 的数组变异方法。
• 考虑添加防抖处理，如果选项数量较多。