简单的布局型行内表单

<template>
  <el-form style="margin-top: 20px;" :inline="true" :model="form" class="demo-form-inline" size="mini">
    <el-row>
      <el-col :span="8">
        <el-form-item class="fullWidth" label="设备名称">
          <el-input v-model="form.user" placeholder="设备名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item class="fullWidth" label="IP地址">
          <el-input v-model="form.ip" placeholder="IP地址"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item class="fullWidth" label="端口">
          <el-input v-model="form.user" placeholder="端口"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

// css 代码
.fullWidth {
  width: 100% !important;
  ::v-deep {
    .el-form-item__content {
      width: 80%;
      input {
        width: 100%;
      }
    }
  }
}