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

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

通过设置 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个输入框是垂直排列的，现在可以横着排列了，而且一行排列多少个它应该是根据宽度自适应的，