当前位置：首页 > VUE

vue多重循环实现全选

2026-01-20 06:42:02VUE

实现 Vue 多重循环下的全选功能

在 Vue 中实现多重循环的全选功能，需要处理嵌套数据结构，并通过计算属性或方法动态控制选中状态。以下是具体实现方法：

数据结构设计

假设数据为嵌套结构，例如分类下包含多个子项：

data() {
  return {
    categories: [
      {
        id: 1,
        name: '分类1',
        items: [
          { id: 101, name: '子项1', checked: false },
          { id: 102, name: '子项2', checked: false }
        ]
      },
      {
        id: 2,
        name: '分类2',
        items: [
          { id: 201, name: '子项3', checked: false },
          { id: 202, name: '子项4', checked: false }
        ]
      }
    ],
    selectAll: false // 全局全选状态
  }
}

全局全选控制

通过计算属性或方法实现全局全选逻辑：

methods: {
  toggleSelectAll() {
    this.selectAll = !this.selectAll;
    this.categories.forEach(category => {
      category.items.forEach(item => {
        item.checked = this.selectAll;
      });
    });
  }
}

在模板中绑定全选按钮：

<input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选

局部全选（分类级别）

为每个分类添加独立的全选控制：

methods: {
  toggleCategorySelectAll(category) {
    const allChecked = category.items.every(item => item.checked);
    category.items.forEach(item => {
      item.checked = !allChecked;
    });
  }
}

模板中为每个分类添加全选按钮：

<div v-for="category in categories" :key="category.id">
  <input 
    type="checkbox" 
    :checked="category.items.every(item => item.checked)"
    @change="toggleCategorySelectAll(category)"
  > {{ category.name }}
</div>

自动更新全局全选状态

通过计算属性监听所有子项的选中状态：

computed: {
  isAllSelected() {
    return this.categories.every(category => 
      category.items.every(item => item.checked)
    );
  }
},
watch: {
  isAllSelected(newVal) {
    this.selectAll = newVal;
  }
}

完整示例模板

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全局全选

    <div v-for="category in categories" :key="category.id">
      <input
        type="checkbox"
        :checked="category.items.every(item => item.checked)"
        @change="toggleCategorySelectAll(category)"
      > {{ category.name }}

      <div v-for="item in category.items" :key="item.id">
        <input type="checkbox" v-model="item.checked"> {{ item.name }}
      </div>
    </div>
  </div>
</template>