为何Vuetify Select会因条件渲染的隐藏元素改变尺寸？

我在使用Vuetify的多选Select组件时，通过selection插槽自定义选中内容的显示逻辑：全选时展示“All selected”、选中多个时展示“N selected”、选中单个时展示“One selected”，每个分支都只渲染一个v-chip。但切换选中状态时，组件的占用空间会发生变化，设置固定cols值时还会因空间不足导致高度增高。

原代码如下：

<v-col cols="auto">
  <v-select label="Select" :items="items" hide-details v-model="selectedItems" multiple>
    <template v-slot:selection="{ index, item }">
      <div v-if="allSelected">
        <v-chip v-if="index == 0">All selected</v-chip>
      </div>
      <div v-else-if="selectedItems.length > 1">
        <v-chip v-if="index == 0">{{selectedItems.length}} selected</v-chip>
      </div>
      <div v-else>
        <v-chip v-if="index == 0">One selected</v-chip>
      </div>
    </template>
  </v-select>
</v-col>

问题原因 #

Vuetify的selection插槽会为每一个选中项触发一次渲染，即使我们通过index == 0只显示第一个chip，其他选中项对应的<div>元素仍然会被渲染到DOM中（只是隐藏状态），这些隐藏元素会干扰组件的布局计算，导致尺寸出现波动。

解决方案 #

1. 仅渲染单个选中内容节点

调整插槽逻辑，只在index === 0时渲染内容，其他索引直接跳过，避免生成多余的DOM元素：

<v-col cols="auto">
  <v-select label="Select" :items="items" hide-details v-model="selectedItems" multiple>
    <template v-slot:selection="{ index }">
      <template v-if="index === 0">
        <v-chip>
          {{ allSelected ? 'All selected' : selectedItems.length > 1 ? `${selectedItems.length} selected` : 'One selected' }}
        </v-chip>
      </template>
    </template>
  </v-select>
</v-col>

2. 固定组件高度（可选）

如果仍存在高度波动，可以通过CSS强制设置组件的最小高度，或者启用single-line属性让Select保持单行高度：

<!-- 使用single-line属性 -->
<v-select label="Select" :items="items" hide-details v-model="selectedItems" multiple single-line>

或者添加自定义样式：

.v-select {
  min-height: 56px; /* 适配Vuetify默认组件高度 */
}

这样就能保证选中状态切换时，Select组件的尺寸保持稳定，不会出现空间跳动或高度增高的问题。

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