vue实现列表全选

实现全选功能的基本思路

在Vue中实现列表全选功能，通常需要结合v-model和计算属性来管理选中状态。全选按钮的状态与列表中所有项的选中状态相互关联。

基础实现方法

准备一个数据列表和对应的选中状态数组：

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

创建全选的计算属性：

computed: {
  allSelected: {
    get() {
      return this.selectedItems.length === this.items.length
    },
    set(value) {
      this.selectedItems = value ? [...this.items] : []
    }
  }
}

模板中使用v-model绑定：

<input type="checkbox" v-model="allSelected"> 全选
<div v-for="item in items" :key="item.id">
  <input 
    type="checkbox" 
    :value="item" 
    v-model="selectedItems"
  >
  {{ item.name }}
</div>

优化性能的实现

对于大型列表，可以使用ID数组代替对象数组来提高性能：

data() {
  return {
    items: [...], // 原始数据
    selectedIds: [] // 只存储选中的ID
  }
}

修改计算属性：

computed: {
  allSelected: {
    get() {
      return this.selectedIds.length === this.items.length
    },
    set(value) {
      this.selectedIds = value ? this.items.map(item => item.id) : []
    }
  }
}

使用Vuex的状态管理

在大型应用中，可以考虑使用Vuex管理选中状态：

// store.js
state: {
  items: [...],
  selectedItems: []
},
mutations: {
  toggleAllSelection(state, selected) {
    state.selectedItems = selected ? [...state.items] : []
  }
}

组件中使用mapState和mapMutations：

computed: {
  ...mapState(['items', 'selectedItems']),
  allSelected: {
    get() {
      return this.selectedItems.length === this.items.length
    },
    set(value) {
      this.toggleAllSelection(value)
    }
  }
}

处理异步加载数据

当数据是异步加载时，需要等待数据加载完成后再初始化选中状态：

async created() {
  await this.loadItems()
  this.selectedItems = []
}

样式和交互优化

可以添加中间状态（部分选中）的视觉效果：

computed: {
  isIndeterminate() {
    return this.selectedItems.length > 0 && 
           this.selectedItems.length < this.items.length
  }
}

模板中应用：

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