Vuetify禁止combobox的chips溢出及下拉列表选中项置顶方案

禁用chips溢出导致的组件高度自动调整 #

Vuetify官方暂无内置配置项实现该需求，你之前尝试的allow-overflow属性是用于控制下拉菜单的溢出逻辑，不作用于输入框内部的chips排列，可通过自定义CSS覆盖默认样式实现：

1. 给v-combobox组件添加自定义类名，比如fixed-height-combobox
2. 加入以下样式：

/* 强制chips不折行，超出后横向滚动 */
.fixed-height-combobox .v-field__input {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  /* 隐藏横向滚动条，不需要可删除 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.fixed-height-combobox .v-field__input::-webkit-scrollbar {
  display: none;
}
/* 禁止chips自动收缩 */
.fixed-height-combobox .v-chip {
  flex-shrink: 0 !important;
}

已选中项展示在下拉列表顶部 #

通过自定义排序逻辑处理选项列表即可，不需要修改组件内置属性：

1. 声明计算属性对原选项列表做排序，将已选中项前置

// 示例：原选项列表为items，绑定的选中值为selected
computed: {
  processedItems() {
    const selectedList = this.items.filter(item => this.selected.includes(item))
    const unselectedList = this.items.filter(item => !this.selected.includes(item))
    // 已选中项在前，未选中项保留原有排序在后
    return [...selectedList, ...unselectedList]
  }
}

2. 将v-combobox的:items属性绑定值替换为processedItems

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