<div id="app">
  <el-form ref="form" :model="form" label-width="auto">
    <el-row type="flex" style="flex-wrap:wrap" :gutter="10">
      <el-col :span="12">
        <el-form-item label="字段A">
          <el-input v-model="form.a" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span='12'>
        <el-form-item label="字段B">
          <el-radio-group v-model="form.b">
            <el-radio label="选项1"></el-radio>
            <el-radio label="选项2"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span='12'>
        <el-form-item label="字段C">
          <el-input v-model="form.c" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="字段D">
          <el-input v-model="form.d" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</div>

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");


var Main = {
    data() {
      return {
        form: {}
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.