当前位置：首页 > VUE

vue实现多选全选

2026-03-29 04:31:31VUE

Vue 实现多选和全选功能

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

基础多选实现

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

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

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

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

全选功能实现

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

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

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

vue实现多选全选

<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>