本文已参与「新人创作礼」活动,一起开启掘金创作之路。
前言
上一篇记叙了怎么用json
配置化实现el-form
链接,本文记叙一下怎么解决el-form
布局上的自定义。
一般使用el-form
,要么是块级表单,每个字段占据一行,如官网所示:
要么通过设置inline
属性,实现行内表单,也如官网所示:
那么,能不能全都要?实现一个多行多列的表单, 如下:
思路
这个其实并不复杂,其实说白了就是利用el-row
和el-col
进行排版布局。
在el-form
下放一个el-row
标签,这个标签gutter
属性可以设置每个标段字段之间的间距。
el-row
下可以放置多个el-col
,这个标签上的span
属性设置每个字段所占据的宽度(0 - 24)
,通过这个属性就是实现了行内多列表单。
element-ui
中的栅格布局,一般一行分为24栏,如果某行的el-col
的span
属性累加多于24,则会自动换行,利用这个原理,就可以实现多行表单。
至此基本上实现了自定义布局,实例代码如下:
<el-form>
<el-row :gutter="5">
<el-col :span="6">
<el-form-item prop="field_1">
<label class="universal-form-label" slot="label">字段1</label>
<el-input />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="field_2">
<label class="universal-form-label" slot="label">字段2</label>
<el-input />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item prop="field_3">
<label class="universal-form-label" slot="label">字段3</label>
<el-input />
</el-form-item>
</el-col>
.......
</el-row>
</el-form>
配置化
既然之前写了json
配置化实现el-form
链接,那么这个布局的也同样可以通过配置加入其中。既然是配置,那么自然是在记录字段信息的json
中添加一个新的属性span
,用于记录每个表单字段所占据的宽度(0 -24)
,如下:
const formInfo = [
{ label: '名字', prop: 'name', type: 'input', span: 6 },
{ label: '简介', prop: 'introduction', type: 'textares', span: 6 },
{
label: '性别',
prop: 'sex',
type: 'select',
span: 12
optionsList: [ { id: 1, label: '男' }, { id: 2, label: '女' } ]
},
.......
]
然后再对HTML
模板进行修改,按照的上面的示例代码,添加相应的el-row
和el-col
,将上面字段信息json
中的span
赋值给el-col
上的span
自可实现宽度自定义,如下:
<el-form
ref="form"
:model="form"
:rules="formRules"
label-width="100px"
>
<el-row :gutter="5">
<template v-for="(item, index) in formInfo">
<el-col :span="item.span">
<el-form-item :key="item.prop + index" :prop="item.prop" :label="item.label">
<template v-if="item.type === 'input'">
<el-input v-model="form[item.prop]" />
</template>
<template v-if="item.type === 'textarea'">
<el-input v-model="form[item.prop]" type="textarea" />
</template>
<template v-if="item.type === 'select'">
<el-select v-model="form[item.prop]" style="width: 100%">
<el-option
v-for="option in item.optionList"
:key="option.id"
:label="option.label"
:value="option.id">
</el-option>
</el-select>
</template>
.....
</el-form-item>
</el-col>
</template>
</el-row>
</el-form>