vue2.0 实现全选

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>

关键点：

• 通过按钮的点击事件直接修改 selectedItems 数组。
• selectAll 是一个普通的状态变量，用于控制按钮文本。

注意事项

1. 性能优化：如果列表数据量较大，建议使用 Object 或 Set 存储选中状态，避免数组操作的性能问题。
2. 深层响应：如果 items 是动态加载的，确保在数据更新后重置 selectedItems。
3. 兼容性：Vue 2.0 的 v-model 不支持直接绑定到对象属性，需通过 value 和 input 事件实现复杂场景。