vue实现复选全选

Vue 实现复选全选功能

在 Vue 中实现复选全选功能，可以通过数据绑定和计算属性来管理选中状态。以下是一个完整的实现方案：

数据准备

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

模板部分

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

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

方法实现

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

  updateSelectAll() {
    this.selectAll = this.items.every(item => item.checked)
  }
}

计算属性方式

也可以使用计算属性替代 selectAll 数据属性：

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

简化模板

使用计算属性时，模板可以简化为：

<div>
  <label>
    <input type="checkbox" v-model="selectAll">
    全选
  </label>

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

注意事项

• 确保 v-model 绑定正确的数据属性
• 使用计算属性可以简化代码逻辑
• 对于大型列表，考虑性能优化
• 使用唯一 key 标识每个选项

这种实现方式既保持了响应性，又使代码清晰易维护。可以根据实际需求调整数据结构和样式。