当前位置：首页 > VUE

vue实现全选多选

2026-02-19 15:41:30VUE

Vue 实现全选与多选功能

在 Vue 中实现全选与多选功能，可以通过以下方法完成。以下是一个基于 Vue 3 的示例代码。

数据准备

定义一个包含选项的数组和一个用于存储选中项的数组。

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

全选功能

实现全选功能需要监听全选复选框的状态变化，并根据状态更新选中项数组。

methods: {
  toggleSelectAll(event) {
    if (event.target.checked) {
      this.selectedItems = this.items.map(item => item.id)
    } else {
      this.selectedItems = []
    }
  }
}

多选功能

为每个选项绑定复选框，并通过 v-model 实现双向绑定。

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

全选复选框的绑定

全选复选框的状态需要根据选中项的数量动态更新。

computed: {
  isAllSelected() {
    return this.selectedItems.length === this.items.length
  }
}

<input
  type="checkbox"
  @change="toggleSelectAll"
  :checked="isAllSelected"
/>
全选

完整示例代码

<template>
  <div>
    <input
      type="checkbox"
      @change="toggleSelectAll"
      :checked="isAllSelected"
    />
    全选
    <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() {
      return this.selectedItems.length === this.items.length
    }
  },
  methods: {
    toggleSelectAll(event) {
      if (event.target.checked) {
        this.selectedItems = this.items.map(item => item.id)
      } else {
        this.selectedItems = []
      }
    }
  }
}
</script>