如何在Vuetify的v-form中实现输入控件每行2个并排显示

当然可以！在Vuetify的v-form里实现输入控件的并排布局非常简单，咱们直接用Vuetify内置的**网格系统（v-row + v-col）**就能轻松满足你每行2个控件的需求。

实现思路 #

Vuetify的网格基于12列布局体系：

• 用v-row作为行容器，包裹每一组需要并排的控件
• 给每个控件外层的v-col设置md="6"，这样在中等及以上尺寸的屏幕（≥960px）上，每个控件会占据该行的一半宽度（6/12）；在小屏幕上会自动堆叠成一行一个，保证响应式适配
• 可以给v-row添加mb-4这类间距类，让行与行之间的控件布局更美观

修改后的完整代码 #

<v-form ref="form" v-model="valid">
  <!-- 第一行：Especialidade + Servico -->
  <v-row class="mb-4">
    <v-col md="6">
      <v-select 
        :items="especialidades" 
        v-model="especialidadeSelecionada" 
        item-value="cdCartorioNatureza" 
        item-text="nome" 
        label="Especialidade" 
        :rules="[v => !!v || 'Campo obrigatório']" 
        @change="buscarServicos" 
        placeholder="Selecione uma especialidade" 
        required 
      ></v-select>
    </v-col>
    <v-col md="6">
      <v-select 
        :items="servicos" 
        v-model="servicoSelecionado" 
        label="Servico" 
        ref="servicos" 
        :placeholder="placeholderServicos" 
        item-value="value" 
        item-text="nome" 
        :rules="[v => !!v || 'Campo obrigatório']" 
        required 
      ></v-select>
    </v-col>
  </v-row>

  <!-- 第二行：Forma de calculo + Quantidade -->
  <v-row class="mb-4">
    <v-col md="6">
      <v-select 
        :items="formaCalculos" 
        v-model="formaCalculoSelecionada" 
        label="Forma de calculo" 
        placeholder="Selecione a forma de calculo" 
        item-value="cdDivisor" 
        item-text="nmDivisor" 
        :rules="[v => !!v || 'Campo obrigatório']" 
        required 
      ></v-select>
    </v-col>
    <v-col md="6">
      <v-text-field 
        v-model.number="quantidade" 
        label="Quantidade" 
        mask="###" 
        required 
        :rules="quantidadeRules" 
      ></v-text-field>
    </v-col>
  </v-row>

  <!-- 第三行：Valor Base + Protocolo -->
  <v-row class="mb-4">
    <v-col md="6">
      <v-text-field 
        v-model.number="valorBase" 
        label="Valor Base" 
        mask="###.###,##" 
        required 
      ></v-text-field>
    </v-col>
    <v-col md="6">
      <v-text-field 
        v-model.number="protocolo" 
        label="Protocolo" 
      ></v-text-field>
    </v-col>
  </v-row>

  <!-- 按钮行 -->
  <v-row>
    <v-col md="6">
      <v-btn color="error" @click.stop="limparForm">Limpar</v-btn>
    </v-col>
    <v-col md="6">
      <v-btn color="info" @click.stop="verificarProtocolo" :disabled="!valid"> Adicionar</v-btn>
    </v-col>
  </v-row>
</v-form>

额外说明 #

• 如果想在更小的屏幕上也保持并排，可以把md="6"改成sm="6"，这样在≥600px的屏幕上就会并排显示
• 如果你需要更精细的间距控制，可以用Vuetify的间距类（比如ma-2、pa-3）给单个控件或容器添加内外边距

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