vue全选实现

Vue 全选实现方法

使用 v-model 绑定复选框

在 Vue 中，可以通过 v-model 绑定复选框的状态。全选功能可以通过一个主复选框控制多个子复选框的状态。

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

使用计算属性优化

计算属性可以简化全选逻辑，自动更新全选状态。

<template>
  <div>
    <label>
      <input type="checkbox" v-model="allSelected" @change="toggleAll"> 全选
    </label>
    <div v-for="item in items" :key="item.id">
      <label>
        <input type="checkbox" v-model="selectedItems" :value="item.id"> {{ item.name }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    };
  },
  computed: {
    allSelected: {
      get() {
        return this.selectedItems.length === this.items.length;
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : [];
      }
    }
  }
};
</script>

使用 Vuex 管理状态

在大型应用中，可以使用 Vuex 管理全选状态。

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

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

export default {
  computed: {
    ...mapState(['items', 'selectedItems']),
    ...mapGetters(['allSelected', 'isSelected'])
  },
  methods: {
    ...mapMutations(['toggleAll', 'toggleItem'])
  }
};
</script>

动态绑定类名

可以通过动态绑定类名实现选中样式。

<template>
  <div>
    <label :class="{ 'active': selectAll }">
      <input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选
    </label>
    <div v-for="item in items" :key="item.id">
      <label :class="{ 'active': selectedItems.includes(item.id) }">
        <input type="checkbox" v-model="selectedItems" :value="item.id"> {{ item.name }}
      </label>
    </div>
  </div>
</template>

<style>
.active {
  background-color: #f0f0f0;
}
</style>

以上方法可以根据具体需求选择适合的实现方式。