用vuetify形式

Question

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

TKS

这是我的代码，我想并排编写textedit（每行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>

然后您可以使用padding and margins classes来让他们按照您希望的方式进行观看。