vue 中如何实现全选

在 Vue 中实现全选功能

使用 v-model 绑定复选框状态

通过 v-model 绑定全选复选框的状态到一个变量（如 selectAll），并监听其变化。当全选状态改变时，更新子复选框的选中状态。

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选
    <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.selectedItems = this.selectAll ? this.items.map(item => item.id) : [];
    }
  }
}
</script>

监听子复选框变化

通过计算属性或监听子复选框的变化，动态更新全选复选框的状态。当所有子复选框被选中时，自动勾选全选复选框。

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id" @change="updateSelectAll">
      {{ 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.selectedItems = this.selectAll ? this.items.map(item => item.id) : [];
    },
    updateSelectAll() {
      this.selectAll = this.selectedItems.length === this.items.length;
    }
  }
}
</script>

使用计算属性优化

通过计算属性动态计算全选状态，避免手动更新 selectAll 变量。

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选
    <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) : [];
      }
    }
  }
}
</script>

结合 Vuex 管理状态

如果项目使用 Vuex 管理状态，可以通过 mutations 和 actions 实现全选功能。

// store.js
export default new Vuex.Store({
  state: {
    items: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ],
    selectedItems: []
  },
  mutations: {
    toggleSelectAll(state, value) {
      state.selectedItems = value ? state.items.map(item => item.id) : [];
    },
    updateSelectedItems(state, items) {
      state.selectedItems = items;
    }
  },
  getters: {
    selectAll: state => state.selectedItems.length === state.items.length
  }
});

<template>
  <div>
    <input type="checkbox" :checked="selectAll" @change="toggleSelectAll"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" :checked="isSelected(item.id)" @change="updateSelected(item.id)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['items', 'selectedItems']),
    ...mapGetters(['selectAll'])
  },
  methods: {
    ...mapMutations(['toggleSelectAll', 'updateSelectedItems']),
    isSelected(id) {
      return this.selectedItems.includes(id);
    },
    updateSelected(id) {
      const selectedItems = [...this.selectedItems];
      const index = selectedItems.indexOf(id);
      if (index > -1) {
        selectedItems.splice(index, 1);
      } else {
        selectedItems.push(id);
      }
      this.updateSelectedItems(selectedItems);
    }
  }
}
</script>

通过以上方法，可以灵活地在 Vue 中实现全选功能，适用于不同场景和需求。