实现Vuetify Combobox全选已过滤列表项的功能需求

核心思路 #

要实现点击「Select All」只选中当前过滤后的项，关键是实时获取Combobox的搜索输入值，并基于这个值过滤数据源，再将过滤结果设为选中项。Vuetify的Combobox提供了search-input属性，专门用于绑定搜索框的输入内容。

具体修改步骤 #

1. 绑定搜索输入值 #

给Combobox添加搜索输入绑定，实时获取用户输入的过滤文本：

<v-combobox v-if="editedIndex == -1"
  label='Phase'
  v-model='editedItems.selected_values'
  :items='phases'
  item-value='pp_code'
  item-text='phasedetails'
  class="pl-2 pr-2"
  multiple
  chips
  <!-- Vue3 使用此绑定方式 -->
  v-model:search-input="searchQuery"
  <!-- Vue2 使用此绑定方式 -->
  <!-- :search-input.sync="searchQuery" -->
>
  <template v-slot:prepend-item>
    <v-list-item ripple @click="toggle()">
      <v-list-item-action>
        <v-icon :color="hasSelectedAllFiltered ? 'indigo darken-4' : ''">
          {{ icon }}
        </v-icon>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title>
          Select All
        </v-list-item-title>
      </v-list-item-content>
    </v-list-item>
    <v-divider class="mt-2"></v-divider>
  </template>
</v-combobox>

在组件data中声明绑定变量：

data() {
  return {
    searchQuery: '',
    // 其他原有变量...
  }
}

2. 实现过滤全选逻辑 #

重写toggle函数，并新增过滤辅助函数，仅选中当前搜索匹配的项：

toggle() {
  this.$nextTick(() => {
    const filteredPhases = this.getFilteredPhases()
    // 判断是否已选中所有过滤项
    const hasSelectedAll = filteredPhases.every(item => 
      this.editedItems.selected_values.some(selected => selected.pp_code === item.pp_code)
    )

    if (hasSelectedAll) {
      // 已全选则清空选中项
      this.editedItems.selected_values = []
    } else {
      // 未全选则选中所有过滤项
      this.editedItems.selected_values = [...filteredPhases]
    }
  })
},
// 辅助函数：根据搜索值过滤数据源
getFilteredPhases() {
  if (!this.searchQuery.trim()) {
    return this.phases.slice()
  }
  // 基于item-text字段做不区分大小写的模糊匹配，可按需修改匹配规则
  const query = this.searchQuery.toLowerCase()
  return this.phases.filter(item => 
    item.phasedetails.toLowerCase().includes(query)
  )
}

3. 修正全选图标状态 #

添加计算属性，动态判断全选状态并切换图标：

computed: {
  hasSelectedAllFiltered() {
    const filtered = this.getFilteredPhases()
    return filtered.length > 0 && this.editedItems.selected_values.length === filtered.length
  },
  icon() {
    return this.hasSelectedAllFiltered ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline'
  }
}

关键说明 #

• 匹配规则：示例基于phasedetails字段做模糊匹配，若需匹配pp_code或其他字段，直接修改getFilteredPhases中的过滤条件即可。
• 响应式处理：使用$nextTick确保DOM更新后再处理选中状态，避免视图不同步问题。
• 版本兼容：注意search-input的绑定方式，Vue3用v-model:search-input，Vue2用:search-input.sync。

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