el-row实现el-form自定义布局

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

上一篇记叙了怎么用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>