当前位置：首页 > VUE

vue 实现单选全选

2026-03-09 15:12:00VUE

Vue 实现单选和全选功能

在 Vue 中实现单选和全选功能，通常需要结合 v-model 和计算属性来管理选中状态。以下是一个完整的实现方案。

数据准备

定义一个数据列表，包含 id 和 checked 属性，用于表示每个选项的选中状态。

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

单选功能

使用 v-model 绑定每个选项的 checked 属性，实现单选功能。

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

全选功能

通过计算属性或方法动态判断是否全选，并实现全选逻辑。

methods: {
  toggleSelectAll() {
    this.items.forEach(item => {
      item.checked = this.selectAll;
    });
  },
  updateSelectAll() {
    this.selectAll = this.items.every(item => item.checked);
  }
}

全选复选框绑定

在模板中添加全选复选框，绑定 selectAll 并触发 toggleSelectAll 方法。

<input 
  type="checkbox" 
  v-model="selectAll" 
  @change="toggleSelectAll"
/>
Select All

完整示例

以下是一个完整的 Vue 组件示例，包含单选和全选功能。

vue 实现单选全选

<template>
  <div>
    <div>
      <input 
        type="checkbox" 
        v-model="selectAll" 
        @change="toggleSelectAll"
      />
      Select All
    </div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        v-model="item.checked" 
        @change="updateSelectAll"
      />
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', checked: false },
        { id: 2, name: 'Item 2', checked: false },
        { id: 3, name: 'Item 3', checked: false }
      ],
      selectAll: false
    };
  },
  methods: {
    toggleSelectAll() {
      this.items.forEach(item => {
        item.checked = this.selectAll;
      });
    },
    updateSelectAll() {
      this.selectAll = this.items.every(item => item.checked);
    }
  }
};
</script>