组件化页面：封装el-form-白红宇

目前在编写个人项目，有一个是管理平台，基本每个页面都有el-from，所以对el-form做了二次封装, 组件在个人开发使用不错，但不确定能满足各种业务需求，所以这里主要和大家分享一下设计思路。

设计组件

分析问题

el-form是element-ui库的表单组件，如果我们要将其进行二次封装，那么需要考虑几个问题：

如何设计表单渲染字段

不同类型的el-form-item怎么去渲染，比如input，select,或者自定义显示内容等

表单联动怎么去处理

事件绑定

表单验证

更多需求...

下面通过这些点，来实现封装一个二次的el-form组件。

从字段开始

拿业务用到的表单来举例，在这个表单中的需求分析。

首先是el-form-item的类型：

tag类型显示

input输入

select选择

按钮或者图片的显示或者绑定操作

textarea输入然后再分析每个节点：

label宽度

是否需要验证

placeholder显示

验证规则

绑定的相关事件

是否可为readonly/disabled

节点的class/样式（一行显示一个或者多个）

初步分析，大概会有这些需求，接下来对单个问题一一来分析解决。

设计渲染字段列表

正常情况下，我们使用form，它的子项会是这样的，比如有input和select：

// input类型
      
     
    // select类型
      
         
          
        
     
    复制代码

仔细一看，外面那一层壳是可以拿掉的，比如长这样：


    
       // 如果是input类型   
       // 如果是select类型   
         
          
        
     
    复制代码

那由此我们可以设计出循环form的字段列表：

label (字段名)

value （字段值 prop，后面会有value代替）

type （字段类型 input/select/password/textarea等）然后除了上面的例子我们还可以自己扩展一些字段：

event (绑定的方法)

list (列表如果是select类型，需要有对于的list去渲染)

TimePickerOptions （时间配置如果是时间类型，可以传入配置）

disabled （是否禁止）

filterable （是否可筛选）

clearable （是否可清除）

required （是否必填根据这个字段，去设置对于的验证规则）

validator （自定义验证验证时将使用自定义验证方法）

show （是否显示，布尔值或者是函数，下面会对联动渲染详细分析）

更多（根据需求和场景扩展更多字段）然后完整的字段配置列表大概是这样的（个人使用场景，不需要使用到所有的设计字段）：

fieldList: [          { label: '账号', value: 'account', type: 'input', required: true, validator: checkAccount },          { label: '密码', value: 'password', type: 'password', required: true, validator: checkPwd },          { label: '昵称', value: 'name', type: 'input', required: true },          { label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true },          { label: '头像', value: 'avatar', type: 'slot', className: 'el-form-block' },          { label: '手机号码', value: 'phone', type: 'input', validator: checkPhone },          { label: '微信', value: 'wechat', type: 'input', validator: checkWechat },          { label: 'QQ', value: 'qq', type: 'input', validator: checkQQ },          { label: '邮箱', value: 'email', type: 'input', validator: checkEmail },          { label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block' },          { label: '状态', value: 'status', type: 'select', list: 'statusList', required: true }        ]复制代码

组件内部怎么操作，很简单，根据规则，一一对应循环字段，绑定属性就ok了，所以组件内部template就是这么点代码：


        
           
            
            
            
            
            
            
            
            
            
              
             
            
            
            
            
      
               {
   { $fn.getDataName({dataList: listTypeInfo[item.list], value: 'value', label: 'key', data: data[item.value]}) || '-' }}      
          
       
    复制代码

自定义和联动

通过上面的操作，我们完成了基本的表单动态渲染，但是只是针对于模版型的场景，举个例子，如果表单中我要显示选择头像，或者需要增加一个第三方的控件，这个时候，上面的渲染规则就有些无能威力了，所以我们需要表单组件支持自定义渲染。

slot-组件自定义神器

不了解的同学请戳这个在上面，组件的代码中有这样一段：


          
    复制代码

**这段代码的意思是：**渲染类型为slot，插槽的名称为‘form-’前缀加上字段的值。有什么用呢？我们回到使用组件的页面。

在form中，这里有一个子项，需要显示图片和按钮，这个时候组件内部已经定义了插槽，并且有对于的名字，我们只需要在外部将对应的插槽传入到组件中，即可实现自定义内容，请看对应代码：


            
          复制代码

组件内插槽除了可以接收对应名字的内容外，还可以将组件中的数据通过插槽传输到外部，在外部使用组件数据渲染内容，自定义组件神器，请务必了解

表单联动

表单联动，推荐阅读element文章--- 表单组件，重要点之一就是表单联动了，我们来分析一下联动的场景：

创建用户时，账号可以填写，编辑用户时，账号只能查看

创建时表单显示的字段只有三个，编辑时可查看到字段为十个

单选框，选择A，AA字段消失，选择B, AA,BB字段消失，选择C，所有字段都显示，并且变成必填

更多联动场景...

显示联动

1.字段定义为布尔值时

在字段定义的时候，有定义一个字段，show，我们可以将show字段定义为布尔值，然后在页面中watch定义数据的是否显示，比如这段代码：

// 根据弹窗类型做数据联动    'dialogInfo.type' (val) {      const fieldList = this.formInfo.fieldList      switch (val) {        case 'userInfo':          fieldList.forEach(item => {            if (['user_old_pwd', 'user_new_pwd', 'user_new1_pwd'].includes(item.value)) {              item.show = true            } else {              item.show = false            }          })          break        case 'password':          fieldList.forEach(item => {            if (!['user_old_pwd', 'user_new_pwd', 'user_new1_pwd'].includes(item.value)) {              item.show = true            } else {              item.show = false            }          })          break      }    }复制代码

2.字段定义为函数时

如果不想再组件外部操作，想把显示隐藏的渲染逻辑交给组件内部处理，那我们可以定义show字段为函数，比如这段代码：

{label: '名称', value: 'name', show: data => {    return data.type === 'userInfo'}}复制代码

这两种方式是我目前自定义组件场景中有用到的，根据需求，使用不同的方法

逻辑联动和事件中间件设计

1. 字段定义为函数时 逻辑联动表示form中某一项发生改变，其他一项或者多项会根据对应的数据发生相对的改变，比如下面这段代码（因为个人项目目前没有这种业务，所以并没有相关示例，代码来自element博客）：

[    {      title: '活动类型',      key: 'act_type',      type: 'radio',      props: {        options: { 1: '拉新', 2: '冲单', 3: '回馈' }      }    },    {      title: '生效方式',      key: 'effect_type',      type: 'radio',      props(form) {        const value;        const map = { 1: '立即', 2: '按时间', 3: '按条件' };        if (form.act_type === 3) {          value = 1;        }        return {           value: value,          options: map         };      }    }  ]复制代码

将需要联动的字段定义为方法，方法接收表单数据，方法根据数据进行对应的联动，这种方法可以基本完美解决各种问题，在组件内部则需要对属性添加一层判断，普通类型只需要进行绑定，typeof为function需要绑定运行的函数。

2. 定义事件字段，通过中间件派发到外部处理 定义事件字段，定义的字段列表中，我们可以设计一个event字段，当事件上绑定方法的时候，字段设计为这样：

{ label: '性别', value: 'sex', type: 'select', list: 'sexList', event: 'changeName', required: true }复制代码

示例代码为select类型，组件的input绑定代码上也需要绑定相关事件：

通过handleEvent中间件，绑定对应类型和对应数据，中间件函数的用处就负责进行页面和组件的通讯，组件内部穿出事件类型和数据，页面接收并且处理，不论多少的事件，只有一个中间件即可以解决。组件内部中间件处理：

// 绑定的相关事件    handleEvent (evnet) {      this.$emit('handleEvent', evnet)    }复制代码

组件使用代码：

页面中处理事件：

// 触发事件    handleEvent (event, data) {      switch (event) {        case 'changeName':            console.log(data)            // 触发相关联动逻辑          break      }    }复制代码

两种方式，各有优劣，这里主要分享思路，大家根据自己业务选择合适的方案。

表单验证处理

表单验证，戳这个，上次写的验证还热乎的---->