vue2.0 实现全选

实现全选功能的方法

在Vue 2.0中实现全选功能通常涉及以下步骤，适用于列表、表格或多选框场景：

数据绑定与状态管理

创建响应式数据属性存储全选状态和子选项列表：

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

全选逻辑实现

通过计算属性或方法处理全选与子选项的联动：

methods: {
  toggleAllSelection() {
    this.isAllSelected = !this.isAllSelected
    this.items.forEach(item => {
      item.selected = this.isAllSelected
    })
  }
}

子选项变化监听

使用侦听器或计算属性监测子选项变化，自动更新全选状态：

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

模板绑定

在模板中实现双向绑定：

<template>
  <div>
    <input type="checkbox" v-model="isAllSelected" @change="toggleAllSelection">
    <label>Select All</label>

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

优化方案

对于大型数据集，可采用以下优化：

使用计算属性

避免深度监听带来的性能消耗：

computed: {
  allSelected: {
    get() {
      return this.items.every(item => item.selected)
    },
    set(value) {
      this.items.forEach(item => {
        item.selected = value
      })
    }
  }
}

部分选中状态

实现中间状态（部分选中）的UI表现：

computed: {
  indeterminate() {
    return this.items.some(item => item.selected) && !this.allSelected
  }
}

模板更新

<input 
  type="checkbox" 
  v-model="allSelected"
  :indeterminate="indeterminate"
>

注意事项

1. 确保v-model与checkbox正确绑定
2. 深度监听可能影响性能，大数据量时建议使用计算属性
3. 使用key属性保证列表渲染效率
4. 复杂场景可考虑Vuex管理状态

以上方案可根据实际需求调整，适用于大多数需要全选功能的Vue 2.0项目场景。