当前位置：首页 > VUE

vue全选按钮怎么实现

2026-02-23 16:41:54VUE

Vue 全选按钮实现方法

基于 v-model 和计算属性

通过计算属性实现全选逻辑，适用于列表项绑定复选框的场景。

vue全选按钮怎么实现

<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' }
      ],
      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>

使用 watch 监听变化

通过 watch 监听全选状态变化，适用于需要额外处理选中逻辑的场景。

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

<script>
export default {
  data() {
    return {
      allSelected: false,
      items: [
        { id: 1, name: '选项1', checked: false },
        { id: 2, name: '选项2', checked: false }
      ]
    }
  },
  watch: {
    allSelected(newVal) {
      this.items.forEach(item => {
        item.checked = newVal
      })
    },
    items: {
      deep: true,
      handler(newVal) {
        this.allSelected = newVal.every(item => item.checked)
      }
    }
  }
}
</script>

结合 Vuex 状态管理

在大型项目中，可通过 Vuex 集中管理选中状态。

// store.js
const store = new Vuex.Store({
  state: {
    items: [
      { id: 1, name: '选项1', checked: false },
      { id: 2, name: '选项2', checked: false }
    ]
  },
  mutations: {
    toggleAll(state, checked) {
      state.items.forEach(item => {
        item.checked = checked
      })
    }
  },
  getters: {
    allSelected: state => state.items.every(item => item.checked)
  }
})

<template>
  <div>
    <input 
      type="checkbox" 
      :checked="allSelected"
      @change="$store.commit('toggleAll', $event.target.checked)"
    > 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="item.checked">
      {{ item.name }}
    </div>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['items']),
    ...mapGetters(['allSelected'])
  }
}
</script>