element的form表單中如何一行顯示多el-form-item標籤

效果圖:

HTML代碼：

<script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.4.3/lib/index.js"></script>
    <div id="app">
        <el-form ref="form" :model="form" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="活動名稱">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活動區域">
                        <el-select v-model="form.region" placeholder="請選擇活動區域">
                            <el-option label="區域一" value="shanghai"></el-option>
                            <el-option label="區域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活動名稱1">
                        <el-input v-model="form.name1"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="活動名稱2">
                        <el-input v-model="form.name2"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活動區域2">
                        <el-select v-model="form.region2" placeholder="請選擇活動區域">
                            <el-option label="區域一" value="shanghai"></el-option>
                            <el-option label="區域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活動名稱3">
                        <el-input v-model="form.name3"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>

Babel + JSX + No-Library (pure JS)代碼：

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