当前位置：首页 > VUE

vue2.0 实现全选

2026-02-22 09:16:00VUE

Vue 2.0 实现全选功能

在 Vue 2.0 中实现全选功能，通常需要结合 v-model 和计算属性来管理复选框的状态。以下是实现全选的两种常见场景：列表全选和单个全选按钮。

列表全选功能

通过一个全选复选框控制多个子复选框的状态，同时子复选框的变化也会影响全选状态。

<template>
  <div>
    <!-- 全选复选框 -->
    <input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选

    <!-- 子复选框列表 -->
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id">
      {{ 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: {
    selectAll: {
      get() {
        return this.selectedItems.length === this.items.length;
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : [];
      }
    }
  },
  methods: {
    toggleAll() {
      this.selectAll = !this.selectAll;
    }
  }
};
</script>

关键点：

selectAll 是一个计算属性，通过 get 和 set 实现双向绑定。
selectedItems 存储选中的子项 ID，通过 v-model 绑定到子复选框。

单个全选按钮功能

通过一个按钮控制全选或取消全选，不依赖复选框的 v-model。

<template>
  <div>
    <button @click="toggleSelectAll">{{ selectAll ? '取消全选' : '全选' }}</button>

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: [],
      selectAll: false
    };
  },
  methods: {
    toggleSelectAll() {
      this.selectAll = !this.selectAll;
      this.selectedItems = this.selectAll ? this.items.map(item => item.id) : [];
    }
  }
};
</script>

关键点：