vue2实现全选

Vue2 实现全选功能

在 Vue2 中实现全选功能可以通过绑定 v-model 和计算属性来完成。以下是具体实现方式：

数据准备

定义数据模型，包含一个全选状态和多个子选项：

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

全选逻辑

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

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

模板绑定

在模板中使用 v-model 绑定全选和子选项：

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

方法实现（替代方案）

如果不使用计算属性，可以通过方法实现：

methods: {
  toggleSelectAll() {
    this.selectAll = !this.selectAll
    this.items.forEach(item => {
      item.selected = this.selectAll
    })
  },
  checkSelectAll() {
    this.selectAll = this.items.every(item => item.selected)
  }
}

注意事项

• 确保子选项的 selected 状态变化能触发全选状态的更新
• 如果数据是异步加载的，需要在数据加载完成后初始化状态
• 对于大量数据，考虑使用性能优化的方式实现