当前位置：首页 > VUE

vue多重循环实现全选

2026-02-20 22:45:37VUE

实现全选功能的多重循环方法

在Vue中实现全选功能通常涉及嵌套循环，例如表格中的多行数据每行包含复选框。以下是具体实现方式：

数据准备

定义包含多层级数据的数组，并为每个子项添加选中状态属性：

data() {
  return {
    list: [
      { id: 1, name: '分类1', checked: false, items: [
        { id: 11, name: '子项1', checked: false },
        { id: 12, name: '子项2', checked: false }
      ]},
      // 更多分类...
    ],
    selectAll: false
  }
}

全选逻辑实现

通过计算属性或方法处理全选状态：

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

模板渲染

使用嵌套v-for渲染多层级结构：

<div v-for="category in list" :key="category.id">
  <input 
    type="checkbox" 
    v-model="category.checked"
    @change="updateChildItems(category)"
  > {{ category.name }}

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

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

状态联动方法

添加子项和父级的状态联动方法：

methods: {
  updateChildItems(category) {
    category.items.forEach(item => {
      item.checked = category.checked
    })
    this.checkSelectAll()
  },

  updateParentStatus(category) {
    category.checked = category.items.every(item => item.checked)
    this.checkSelectAll()
  },

  checkSelectAll() {
    this.selectAll = this.list.every(category => 
      category.checked && category.items.every(item => item.checked)
    )
  }
}