vue.js - 使用 vuetify 表单并排输入

Question

可以将一个或多个输入控件与 v-form 并排放置吗？

谢谢

这是我的代码，我想并排编辑文本(每行 2 个)

 <v-form ref="form" v-model="valid">
            <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-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-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-text-field
              v-model.number="quantidade"
              label="Quantidade"
              mask="###"
              required
              :rules="quantidadeRules"
            ></v-text-field>
            <v-text-field
              v-model.number="valorBase"
              label="Valor Base"
              mask="###.###,##"
              required
            ></v-text-field>
            <v-text-field
              v-model.number="protocolo"
              label="Protocolo"
            ></v-text-field>
            <v-btn color="error" @click.stop="limparForm">Limpar</v-btn>
            <v-btn color="info" @click.stop="verificarProtocolo" :disabled="!valid">
              Adicionar</v-btn>
          </v-form>

-== 这里我需要输入更多细节，因为堆栈不允许我保存问题

Answer 1

Vuetify 使用 12 列布局。我通常完成你想要做的事情的方法是使用 v-flex .要并排放置两个组件，我们需要将 12 列分成相等的部分(6 和 6)。

来自添加了文本字段的 Vuetify 文档:

<v-container grid-list-md text-xs-center>
      <v-layout row wrap>
       <v-flex xs6>
        <v-text-field
          v-model="field1"
          label="Field 1"
        ></v-text-field>
       </v-flex>
       <v-flex xs6>
         <v-text-field
           v-model="field2"
           label="Field 2"
         ></v-text-field>
       </v-flex>
     </v-layout>
</v-container>

然后你可以玩padding and margins classes让他们看起来像你希望的那样。