当前位置：首页 > VUE

vue实现全选功能

2026-03-09 01:57:53VUE

vue实现全选功能

Vue 实现全选功能

在 Vue 中实现全选功能可以通过绑定复选框的状态和数据列表来实现。以下是两种常见的实现方式：

使用 v-model 绑定全选状态

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
    <span>全选</span>
    <ul>
      <li v-for="item in items" :key="item.id">
        <input type="checkbox" v-model="selectedItems" :value="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    toggleSelectAll() {
      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>
    <input type="checkbox" v-model="allSelected" @change="selectAllItems">
    <span>全选</span>
    <ul>
      <li v-for="item in items" :key="item.id">
        <input type="checkbox" v-model="item.selected">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', selected: false },
        { id: 2, name: 'Item 2', selected: false },
        { id: 3, name: 'Item 3', selected: false }
      ]
    }
  },
  computed: {
    allSelected: {
      get() {
        return this.items.every(item => item.selected)
      },
      set(value) {
        this.items.forEach(item => {
          item.selected = value
        })
      }
    }
  },
  methods: {
    selectAllItems() {
      this.items.forEach(item => {
        item.selected = this.allSelected
      })
    }
  }
}
</script>