vue实现多选 全选

Vue 实现多选和全选功能

在 Vue 中实现多选和全选功能，通常需要结合 v-model 和计算属性来管理选中状态。以下是具体实现方法：

基础多选实现

1. 数据准备 定义列表数据和选中项的数组：

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

2. 模板渲染 使用 v-model 绑定复选框到 selectedItems：

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

全选功能实现

1. 计算全选状态 通过计算属性判断是否全选，并实现全选/取消全选：

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

2. 全选复选框绑定 在模板中添加全选控制：

   

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

完整示例代码

<template>
  <div>
    <div>
      <input 
        type="checkbox" 
        v-model="isAllSelected"
      > 全选
    </div>

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  },
  computed: {
    isAllSelected: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value 
          ? this.items.map(item => item.id) 
          : []
      }
    }
  }
}
</script>

注意事项

• 确保 v-model 绑定的 selectedItems 是数组类型
• 对象类型的选项需要保持引用一致性
• 使用 computed 的 setter 实现全选逻辑更符合 Vue 响应式原则

这种方法适用于大多数多选场景，如需更复杂的功能（如分页全选），需要额外处理数据范围。