当前位置：首页 > VUE

vue实现多个全选

2026-02-25 17:22:03VUE

Vue 实现多个全选功能

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

数据绑定 创建一个数组来存储所有选项的数据，并为每个选项添加一个 selected 属性来控制选中状态。

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

全选逻辑 通过计算属性或方法实现全选和反选功能。当 selectAll 为 true 时，将所有选项的 selected 设置为 true。

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

模板部分 在模板中使用 v-model 绑定每个选项的 selected 属性，并为全选复选框绑定 selectAll。

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

监听选项变化 如果需要在全选状态下取消某个选项时自动取消全选状态，可以添加一个监听器。

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

多组全选实现

对于多组数据需要分别全选的情况，可以采用类似的方法，但需要为每组数据单独管理状态。

数据结构调整 将数据分组，并为每组添加一个全选状态。

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

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

methods: {
  toggleGroupSelectAll(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="toggleGroupSelectAll(group)"
  > {{ group.name }}全选
  <div v-for="item in group.items" :key="item.id">
    <input type="checkbox" v-model="item.selected"> {{ item.name }}
  </div>
</div>