vue3 Element Plus 表单输入框放到一行

12690人阅读 2020/10/18 21:19 总访问：4813599 评论：0 收藏：0 手机

分类: 前端

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

通过设置 inline 属性为 true 可以让表单域变为行内的表单域。

**真的非常简单，直接:inline="true"就搞定了。官方例子如下：**
```
<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="Approved by">
      <el-input v-model="formInline.user" placeholder="Approved by" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="formInline.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const formInline = reactive({
  user: '',
  region: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>
```

**写4个输入框效果更明显一点**
```
<el-form
      ref="formRef"
      :inline="true"
      label-width="80px"
      :model="form"
      :rules="rules"
      class="demo-form-inline"
    >
      <el-form-item label="宗地位置" prop="landName">
        <el-input v-model.trim="form.landName" />
      </el-form-item>
      <el-form-item label="地块位置" prop="areaposition">
        <el-input v-model.trim="form.areaposition" />
      </el-form-item>
      <el-form-item label="控规编号" prop="kgnumber">
        <el-input v-model.trim="form.kgnumber" />
      </el-form-item>
      <el-form-item label="土地面积" prop="landarea">
        <el-input v-model.trim="form.landarea" />
      </el-form-item>
    </el-form>
```
效果如下，本来4个输入框是垂直排列的，现在可以横着排列了，而且一行排列多少个它应该是根据宽度自适应的，
![](https://img.tnblog.net/arcimg/aojiancc/8148a49c93d745569dd1ffc75e1220c5.png)

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

vue3 Element Plus 表单输入框放到一行

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}