Vue中如何修改d-flex布局内v-text-field组件的宽度？

开发者阿泽

2026-8-26

问题原因

Vuetify的v-text-field组件根节点默认自带flex: 1 1 auto样式规则，在flex弹性容器中，设置了flex-grow:1的子项会自动拉伸占满所有剩余可用空间，直接设置width属性的优先级低于flex布局的拉伸规则，所以不会生效。
你设置的width:30px尺寸过小，outlined样式的输入框本身左右内边距、边框宽度加起来已经超过30px，就算生效也几乎看不到可输入区域。

解决方案

不需要修改模板结构，直接调整样式覆盖默认flex规则即可：

<style scoped>
.selector {
  position: sticky;
  z-index: 1;
  padding-top: 12px;
  top: 0px;
  background-color: white;
}
.textbox {
  /* 核心规则：关闭自动拉伸，第三个参数替换成你需要的实际宽度 */
  flex: 0 0 120px !important;
}
/* 可选：给两个输入框设置固定间距，替代justify-space-between的自动分散对齐效果 */
.d-flex {
  gap: 16px;
}
</style>

补充说明

flex是flex-grow、flex-shrink、flex-basis三个属性的简写，上面写的flex: 0 0 120px分别对应：不放大占剩余空间、空间不足时不缩小、基础宽度为120px，在flex布局中这个属性的优先级高于单独设置的width，不会被默认样式覆盖。
加!important是为了覆盖Vuetify组件自带的默认flex样式，避免选择器优先级不够导致规则不生效。
也可以直接给v-text-field传组件自带的width prop，比如<v-text-field width="120" />，但同样需要配合上面的flex:0 0 auto规则，否则还是会被拉伸。
如果发现输入框内部可输入区域宽度不符合预期，可以用深度选择器调整组件内部元素样式：
```
.textbox :deep(.v-input__control) {
  width: 100%;
}
```