当前位置：首页 > VUE

vue如何实现全部选中

2026-02-21 20:24:26VUE

Vue 实现全选功能

在 Vue 中实现全选功能可以通过绑定 v-model 和监听事件来处理。以下是一个完整的实现示例：

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选
    <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: '选项1', selected: false },
        { id: 2, name: '选项2', selected: false },
        { id: 3, name: '选项3', selected: false }
      ]
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.items.every(item => item.selected)
      },
      set(value) {
        this.items.forEach(item => {
          item.selected = value
        })
      }
    }
  },
  methods: {
    toggleSelectAll() {
      this.selectAll = !this.selectAll
    }
  }
}
</script>

实现原理

数据绑定：使用 v-model 双向绑定每个复选框的状态到 item.selected 属性。
计算属性：selectAll 计算属性用于判断是否所有选项都被选中（getter），以及在设置时更新所有选项的状态（setter）。
事件处理：通过 @change 事件监听全选复选框的变化，触发 toggleSelectAll 方法。

优化版本（支持部分选中状态）

如果需要支持部分选中状态（如 indeterminate 状态），可以稍作修改：

<template>
  <div>
    <input type="checkbox" 
           v-model="selectAll" 
           :indeterminate="isIndeterminate"
           @change="toggleSelectAll"> 全选
    <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: '选项1', selected: false },
        { id: 2, name: '选项2', selected: false },
        { id: 3, name: '选项3', selected: false }
      ]
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.items.every(item => item.selected)
      },
      set(value) {
        this.items.forEach(item => {
          item.selected = value
        })
      }
    },
    isIndeterminate() {
      return this.items.some(item => item.selected) && !this.selectAll
    }
  },
  methods: {
    toggleSelectAll() {
      this.selectAll = !this.selectAll
    }
  }
}
</script>