Element Form表單佈局（一行多列）

前言

ElementUI的Form表單中的每一項，默認是一行顯示一個，垂直排列的，可是在實際應用中，好比查詢頁面裏，一行一個查詢條件顯然是不太現實的：佔地兒太大，頁面很不友好。查詢條件少的話還好說，若是查詢條件衆多，那麼查詢Form就會顯得很臃腫。所以，須要讓Form表單一行顯示多個el-form-item。

解決方案

ElementUI的頁面佈局，跟bootstrap同樣，是24格柵欄形式的。所以，能夠經過row和col組件，以及col組件的span屬性，完成Form的佈局。

代碼

思路很簡單，代碼也不復雜，直接上代碼：

<template>
    <div>
        <el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini">
            <el-row>
                <el-col span="8">
                    <el-form-item label="謎面">
                        <el-input v-model="dengmiQueryForm.mimian"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="謎目">
                        <el-input v-model="dengmiQueryForm.mimu"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="謎格">
                        <el-input v-model="dengmiQueryForm.mige"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="8">
                    <el-form-item label="謎底">
                        <el-input v-model="dengmiQueryForm.midi"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="做者">
                        <el-input v-model="dengmiQueryForm.zuozhe"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="謎底字數">
                        <el-input v-model="dengmiQueryForm.midiLength"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="submitForm" icon="el-icon-search">查詢</el-button>
                    <el-button type="warning" @click="resetForm" icon="el-icon-search" plain>重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script> export default { name: "dengmiQuery", data() { return { dengmiQueryForm: { mimian:'', mimu:'', mige:'', midi:'', zuozhe:'', midiLength:'' } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script>

<style scoped>
   
</style>

效果圖