vue实现多个全选

Vue 实现多个全选功能

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

数据绑定与状态管理

使用 v-model 绑定复选框的状态，确保数据与视图同步。可以创建一个数组来存储选中的项，或者使用对象来管理多个全选组的状态。

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

全选逻辑实现

通过计算属性或方法实现全选功能。当全选复选框被点击时，遍历所有子项并更新其选中状态。

methods: {
  toggleSelectAll() {
    this.items.forEach(item => {
      item.selected = this.selectAll
    })
  }
}

监听子项变化

监听子项复选框的变化，确保当所有子项被选中时，全选复选框自动勾选；反之取消勾选。

watch: {
  items: {
    deep: true,
    handler(newItems) {
      this.selectAll = newItems.every(item => item.selected)
    }
  }
}

模板绑定

在模板中使用 v-model 绑定复选框，并为全选复选框添加事件监听。

<input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> Select All
<div v-for="item in items" :key="item.id">
  <input type="checkbox" v-model="item.selected"> {{ item.name }}
</div>

多个全选组

如果需要实现多个全选组，可以为每个组创建独立的状态管理。

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

为每个组实现独立的 toggleSelectAll 方法。

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

在模板中为每个组绑定独立的全选逻辑。

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

通过以上方法，可以灵活实现多个全选功能，适用于复杂场景下的复选框管理。