vue实现多选 全选

实现多选和全选功能

在Vue中实现多选和全选功能可以通过以下方式完成。假设有一个列表数据，需要实现勾选部分项或一键全选。

数据准备

定义一个数据列表和选中项的数组，以及全选状态。

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

多选实现

为每个列表项绑定v-model到selectedItems数组，通过checkbox的value控制选中状态。

<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) 
        : []
    }
  }
}

在模板中添加全选复选框：

<input 
  type="checkbox" 
  v-model="isAllSelected"
>
Select All

状态同步

当手动勾选所有项目时，全选复选框应自动选中；取消任意一项时，全选应自动取消。

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

完整示例代码

<template>
  <div>
    <input 
      type="checkbox" 
      v-model="isAllSelected"
    >
    Select All

    <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: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    }
  },
  computed: {
    isAllSelected: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value 
          ? this.items.map(item => item.id) 
          : []
      }
    }
  }
}
</script>

这种方式实现了多选和全选的联动效果，代码简洁且易于维护。通过计算属性处理全选逻辑，避免了手动维护状态的一致性。