如何在v-select或v-combobox中添加「全选」选项？

嘿，这个需求我之前在项目里也碰到过，Vuetify的v-select和v-combobox本身没有内置全选功能，但实现起来其实挺简单的，分两种组件给你详细说下：

首先得确保你的v-select开启了multiple属性，之后我们可以给选项列表手动添加「全选」项，再通过监听选中值的变化来处理全选/取消全选的逻辑。

示例代码： #

<template>
  <v-select
    v-model="selectedItems"
    :items="selectItems"
    multiple
    label="选择你需要的选项"
    @change="handleSelectChange"
  ></v-select>
</template>

<script setup>
import { ref, computed } from 'vue'

// 原始的业务选项列表
const originalOptions = ref([
  { text: '前端开发', value: 'frontend' },
  { text: '后端开发', value: 'backend' },
  { text: '测试运维', value: 'devops' },
])

// 给选项列表插入「全选」项
const selectItems = computed(() => [
  { text: '全选', value: '__all__' }, // 用特殊值标记全选项，避免和正常选项冲突
  ...originalOptions.value
])

const selectedItems = ref([])

const handleSelectChange = (newValues) => {
  // 当选中「全选」时，自动选中所有原始选项
  if (newValues.includes('__all__')) {
    selectedItems.value = originalOptions.value.map(item => item.value)
  } else {
    // 当所有原始选项都被手动选中时，自动勾选「全选」
    const allOriginalSelected = originalOptions.value.every(item => newValues.includes(item.value))
    if (allOriginalSelected) {
      selectedItems.value = [...newValues, '__all__']
    }
  }
}
</script>

逻辑说明： #

1. 当用户点击「全选」时，会自动替换选中值为所有原始选项的value，同时「全选」项会被自动取消（你也可以根据需求调整是否保留它在选中列表里）
2. 当用户手动勾选完所有原始选项时，「全选」项会被自动选中，提升交互体验
3. 如果取消任何一个原始选项，「全选」的选中状态也会自动消失

v-combobox支持用户自定义输入选项，所以处理逻辑和v-select类似，但需要额外考虑过滤自定义输入的情况（如果允许用户输入的话）。

示例代码： #

<template>
  <v-combobox
    v-model="selectedItems"
    :items="comboItems"
    multiple
    label="选择或自定义选项"
    @change="handleComboChange"
    allow-overflow
  ></v-combobox>
</template>

<script setup>
import { ref, computed } from 'vue'

const originalOptions = ref([
  { text: '苹果', value: 'apple' },
  { text: '香蕉', value: 'banana' },
  { text: '橙子', value: 'orange' },
])

const comboItems = computed(() => [
  { text: '全选', value: '__all__' },
  ...originalOptions.value
])

const selectedItems = ref([])

const handleComboChange = (newValues) => {
  // 过滤掉用户自定义的非预设选项（如果不需要自定义输入可以省略这步）
  const validValues = newValues.filter(val => 
    ['__all__', ...originalOptions.value.map(o => o.value)].includes(val)
  )

  if (validValues.includes('__all__')) {
    // 选中全选时，替换为所有原始选项
    selectedItems.value = originalOptions.value.map(o => o.value)
  } else {
    const allSelected = originalOptions.value.every(o => validValues.includes(o.value))
    if (allSelected) {
      selectedItems.value = [...validValues, '__all__']
    } else {
      selectedItems.value = validValues
    }
  }
}
</script>

额外提示： #

• 如果你不需要「自动勾选全选」的逻辑，可以去掉allOriginalSelected相关的判断，简化代码
• 全选项的value可以用任何和正常选项不冲突的值，比如null、'select-all'都可以
• 如果是Vue 2选项式API，逻辑完全一致，只是把script setup换成传统的data、methods写法即可

内容的提问来源于stack exchange，提问作者Julienn