vue.js 实现全选

Vue.js 实现全选功能

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

数据绑定与状态管理

使用 v-model 绑定复选框的状态，并通过数组或对象管理选中项。例如，定义一个 items 数组和 selectedItems 数组：

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

全选复选框逻辑

添加一个全选复选框，通过计算属性或方法动态更新选中状态。使用 v-model 绑定 selectAll，并通过 watch 或方法监听其变化：

methods: {
  toggleSelectAll() {
    if (this.selectAll) {
      this.selectedItems = this.items.map(item => item.id);
    } else {
      this.selectedItems = [];
    }
  }
}

单个复选框逻辑

为每个子项复选框绑定 v-model，监听 selectedItems 的变化。当所有子项被选中时，自动更新全选状态：

watch: {
  selectedItems(newVal) {
    this.selectAll = newVal.length === this.items.length;
  }
}

模板实现

在模板中绑定全选复选框和子项复选框：

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

优化与扩展

• 性能优化：对于大量数据，建议使用 Object 或 Set 存储选中状态以减少数组操作开销。
• 自定义组件：封装为可复用的组件，通过 props 传递数据和方法。
• 异步数据：在数据加载完成后初始化选中状态。

通过以上步骤，可以实现一个响应式的全选功能，适用于列表、表格等场景。