Element Form表单布局（一行多列）

前言

ElementUI的Form表单中的每一项，默认是一行显示一个，垂直排列的，但是在实际应用中，比如查询页面里，一行一个查询条件显然是不太现实的：占地儿太大，页面很不友好。查询条件少的话还好说，如果查询条件众多，那么查询Form就会显得很臃肿。因此，需要让Form表单一行显示多个el-form-item。

解决方案

ElementUI的页面布局，跟bootstrap一样，是24格栅栏形式的。因此，可以通过row和col组件，以及col组件的span属性，完成Form的布局。

代码

思路很简单，代码也不复杂，直接上代码：

1<template>
2    <div>
3        <el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini">
4            <el-row>
5                <el-col span="8">
6                    <el-form-item label="谜面">
7                        <el-input v-model="dengmiQueryForm.mimian"></el-input>
8                    </el-form-item>
9                </el-col>
10                <el-col span="8">
11                    <el-form-item label="谜目">
12                        <el-input v-model="dengmiQueryForm.mimu"></el-input>
13                    </el-form-item>
14                </el-col>
15                <el-col span="8">
16                    <el-form-item label="谜格">
17                        <el-input v-model="dengmiQueryForm.mige"></el-input>
18                    </el-form-item>
19                </el-col>
20            </el-row>
21            <el-row>
22                <el-col span="8">
23                    <el-form-item label="谜底">
24                        <el-input v-model="dengmiQueryForm.midi"></el-input>
25                    </el-form-item>
26                </el-col>
27                <el-col span="8">
28                    <el-form-item label="作者">
29                        <el-input v-model="dengmiQueryForm.zuozhe"></el-input>
30                    </el-form-item>
31                </el-col>
32                <el-col span="8">
33                    <el-form-item label="谜底字数">
34                        <el-input v-model="dengmiQueryForm.midiLength"></el-input>
35                    </el-form-item>
36                </el-col>
37            </el-row>
38            <el-row>
39                <el-col>
40                    <el-button type="primary" @click="submitForm" icon="el-icon-search">查询</el-button>
41                    <el-button type="warning" @click="resetForm" icon="el-icon-search" plain>重置</el-button>
42                </el-col>
43            </el-row>
44        </el-form>
45    </div>
46</template>
47
48<script>
49    export default {
50        name: "dengmiQuery",
51        data() {
52            return {
53                dengmiQueryForm: {
54                    mimian:'',
55                    mimu:'',
56                    mige:'',
57                    midi:'',
58                    zuozhe:'',
59                    midiLength:''
60                }
61            };
62        },
63        methods: {
64            submitForm(formName) {
65                this.$refs[formName].validate((valid) => {
66                    if (valid) {
67                        alert('submit!');
68                    } else {
69                        console.log('error submit!!');
70                        return false;
71                    }
72                });
73            },
74            resetForm(formName) {
75                this.$refs[formName].resetFields();
76            }
77        }
78    }
79</script>
80
81<style scoped>
82   
83</style>

效果图