当前位置：首页 > VUE

vue怎么实现全选按钮

2026-02-21 14:17:06VUE

vue怎么实现全选按钮

vue实现全选按钮的方法

在Vue中实现全选按钮通常需要结合v-model和计算属性来管理选中状态。以下是几种常见的实现方式：

基础实现（选项列表）

<template>
  <div>
    <input type="checkbox" v-model="allSelected" @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: {
    allSelected: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : []
      }
    }
  },
  methods: {
    toggleAll() {
      this.allSelected = !this.allSelected
    }
  }
}
</script>

表格中的全选实现

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll"></th>
        <th>名称</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="product in products" :key="product.id">
        <td><input type="checkbox" v-model="selectedProducts" :value="product"></td>
        <td>{{ product.name }}</td>
        <td>{{ product.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100 },
        { id: 2, name: '商品B', price: 200 },
        { id: 3, name: '商品C', price: 300 }
      ],
      selectedProducts: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedProducts.length === this.products.length
      },
      set(value) {
        this.selectedProducts = value ? [...this.products] : []
      }
    }
  }
}
</script>

使用Vuex管理选中状态

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

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

export default {
  computed: {
    ...mapState(['items']),
    ...mapGetters(['selectedItemIds']),
    allSelected: {
      get() {
        return this.selectedItemIds.length === this.items.length
      },
      set(value) {
        if (value) {
          this.selectAllItems()
        } else {
          this.deselectAllItems()
        }
      }
    }
  },
  methods: {
    ...mapMutations(['selectAllItems', 'deselectAllItems'])
  }
}
</script>