当前位置：首页 > VUE

vue实现全选和单选

2026-02-25 00:23:20VUE

Vue 实现全选和单选

在 Vue 中实现全选和单选功能通常涉及以下步骤：

数据绑定

定义一个数组 selectedItems 用于存储选中的项，以及一个布尔值 selectAll 用于控制全选状态。

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，通过 value 属性关联具体项。

vue实现全选和单选

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

全选逻辑

通过计算属性或方法动态更新全选状态，并监听 selectAll 的变化。

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

完整示例

以下是一个完整的 Vue 组件示例：

<template>
  <div>
    <div>
      <input 
        type="checkbox" 
        v-model="isAllSelected"
      >
      <label>Select All</label>
    </div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        v-model="selectedItems" 
        :value="item.id"
      >
      <label>{{ item.name }}</label>
    </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>