vue实现菜单的全选

实现全选功能的基本思路

在Vue中实现菜单全选功能通常需要结合v-model和计算属性来管理选中状态。核心逻辑是维护一个数组存储已选项，通过全选按钮切换所有选项的选中状态。

数据准备

定义菜单数据列表和选中项的数组：

data() {
  return {
    menuItems: [
      { id: 1, name: '菜单项1' },
      { id: 2, name: '菜单项2' },
      { id: 3, name: '菜单项3' }
    ],
    selectedItems: []
  }
}

全选计算属性

添加计算属性处理全选状态：

computed: {
  isAllSelected: {
    get() {
      return this.selectedItems.length === this.menuItems.length
    },
    set(value) {
      this.selectedItems = value 
        ? this.menuItems.map(item => item.id)
        : []
    }
  }
}

模板实现

在模板中使用v-model绑定选中状态：

<template>
  <div>
    <label>
      <input type="checkbox" v-model="isAllSelected"> 全选
    </label>

    <div v-for="item in menuItems" :key="item.id">
      <label>
        <input 
          type="checkbox" 
          :value="item.id" 
          v-model="selectedItems"
        > {{ item.name }}
      </label>
    </div>
  </div>
</template>

处理部分选中状态

如果需要显示中间状态（部分选中），可以修改计算属性：

computed: {
  isAllSelected: {
    get() {
      if (this.selectedItems.length === 0) return false
      return this.selectedItems.length === this.menuItems.length
        ? true
        : null // null表示中间状态
    },
    set(value) {
      this.selectedItems = value 
        ? this.menuItems.map(item => item.id)
        : []
    }
  }
}

模板中对应修改全选复选框：

<input 
  type="checkbox" 
  v-model="isAllSelected"
  :indeterminate="isAllSelected === null"
>

性能优化建议

对于大型列表，使用对象存储选中状态比数组更高效：

data() {
  return {
    selectedItems: {} // 改为对象存储
  }
}

修改计算属性和方法：

computed: {
  isAllSelected: {
    get() {
      const selectedCount = Object.keys(this.selectedItems).length
      if (selectedCount === 0) return false
      return selectedCount === this.menuItems.length
        ? true
        : null
    },
    set(value) {
      if (value) {
        this.menuItems.forEach(item => {
          this.$set(this.selectedItems, item.id, true)
        })
      } else {
        this.selectedItems = {}
      }
    }
  }
}

完整组件示例

<template>
  <div>
    <label>
      <input 
        type="checkbox" 
        v-model="isAllSelected"
        :indeterminate="isAllSelected === null"
      > 全选
    </label>

    <div v-for="item in menuItems" :key="item.id">
      <label>
        <input 
          type="checkbox" 
          :checked="selectedItems[item.id]"
          @change="toggleItem(item.id)"
        > {{ item.name }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: '菜单项1' },
        { id: 2, name: '菜单项2' },
        { id: 3, name: '菜单项3' }
      ],
      selectedItems: {}
    }
  },
  computed: {
    isAllSelected: {
      get() {
        const selectedCount = Object.keys(this.selectedItems).length
        if (selectedCount === 0) return false
        return selectedCount === this.menuItems.length
          ? true
          : null
      },
      set(value) {
        if (value) {
          this.menuItems.forEach(item => {
            this.$set(this.selectedItems, item.id, true)
          })
        } else {
          this.selectedItems = {}
        }
      }
    }
  },
  methods: {
    toggleItem(id) {
      if (this.selectedItems[id]) {
        this.$delete(this.selectedItems, id)
      } else {
        this.$set(this.selectedItems, id, true)
      }
    }
  }
}
</script>