先介绍功能，而后演示功能，最后介绍思路和编码方式。html

nf-form 表单控件的功能

基于 el-form 封装了一个表单控件，包括表单的子控件。既然要封装，那么就要完善一些，把能想到的功能都要实现出来，不想留遗憾。毕竟UI库提供的功能都很强大了，不能浪费了对吧。vue

依赖 json 动态建立表单
能够多行多列
能够调整布局
能够自定义子控件（插槽和动态组件）
能够扩展表单子控件
数据验证
数据联动
组件联动
依据 json 自动建立 model

功能演示

介绍代码以前先看看效果。react

单列表单

这个比较基础，直接贴图。ios

多列表单

有时候须要双列或者三列的表单，这个也是要支持的。git

由于采用的是 el-col 实现的多列，因此理论上最多支持 24 列，固然要看屏幕的宽度了。json

调整布局

看上面的图片，能够发现个问题，改变列数以后，表单页面变得很差看了，这时候须要咱们作一些调整，好比让某个组件占用两份空间，调整一下组件的前后顺序。markdown

【单列中的合并】异步

调整以后，页面能够更紧凑。能够两个组件占一行，也能够三个组件占一行，具体看屏幕的宽度和一个组件的大小。函数

【多列里的占一行】oop

自定义子控件

若是表单提供的子控件不能知足需求，那么怎么办？咱们能够本身来定义一个子控件。

使用插槽

使用插槽比较简单和灵活，能够在表单控件外部彻底控制，适合临时的状况，插槽里能够有多个组件。

使用动态组件

插槽的方式虽然灵活，可是不便于复用，若是须要在多个地方使用的话，能够先作成一个组件，而后用动态组件的方式加入表单。

这里使用动态组件的方式加入了 element 的穿梭控件，也能够加入其它各类组件。

数据验证

能够直接使用 el-form 提供的验证功能，在json里面设置好验证规则便可。

数据联动

一个组件内的联动

这个可使用 el-cascader 来实现。

多个组件的联动

能够用简单来实现。

组件联动

能够根据某个组件的值，设置其余组件是否显示。

封装表单子控件

表单控件须要不少子控件，因此要先封装一会儿控件，而后才方便封装表单控件。

定义接口，统一规范

表单子控件有一个相同的需求，都须要实现属性和 v-model 数据交换，由于 element 把 value 给封装成了v-model，因此没法直接绑定组件的属性，必须创建一个内部变量来绑定。因此须要一个转换的方式，这里采用自定义ref来实现，顺便实现了一下防抖功能。

虽然在表单控件里面并不须要防抖功能，可是查询的时候须要，而表单子控件是能够通用到查询控件里面的。

定义一个 v-model 和 my-change

// 自定义 ref 
/** * 自定义的ref，实现属性和内部变量的数据转换 * @param { reactive } props 组件的属性 * @param { object } context 组件的上下文 * @param { number } delay 延迟刷新的时间，单位：毫秒，默认：0 * @param { string } name 要对应的属性名称，默认：modelValue * @returns 自定义的ref */
export const debounceRef = (props, context, delay = 0, name = 'modelValue') => {
  let _value = props[name]

  // 计时器
  let timeout
  // 是否输入状态。输入时取 value；输入完毕取 modelValue 属性
  let isInput = false
  return customRef((track, trigger) => {
    return {
      get () {
        track()
        if (isInput) {
          // console.log(isInput)
          return _value
        } else {
          // console.log(isInput)
          return props[name]
        }
      },
      set (newValue) {
        isInput = true
        _value = newValue // 绑定值
        trigger() // 组件内部刷新模板
        clearTimeout(timeout) // 清掉上一次的计时
        timeout = setTimeout(() => {
          // 修改 modelValue 属性
          context.emit(`update:${name}`, newValue) // 提交给父组件
          // 用于区分是哪一个组件触发的事件。
          context.emit('my-change', newValue, props.controlId, props.colName)
          isInput = false
        }, delay)
      }
    }
  })
}
复制代码

封装各类表单子控件

按照原子性原则，子控件封装的比较细，直接看图：

代码有点多，不一一介绍了，感兴趣的能够看源码。

封装表单控件

基础工做作好以后，咱们就能够封装 el-form 了。

定义属性

依据 el-form 的属性咱们定义几个关键性属性

介绍属性
/** * 表单控件须要的属性 */
export const formProps = {
  modelValue: Object, // 完整的model
  partModel: Object, // 根据选项过滤后的model
  miniModel: Object, // 精简的model
  /* * 自定义子控件 key:value形式 * * key: 编号。1：插槽；100-200：保留编号 * * value：string：标签；函数：异步组件，相似路由的设置 */
  customerControl: { // 自定义的表单子组件
    type: Object,
    defaule: () => {}
  },
  colOrder: { // 表单字段的排序的依据
    type: Array,
    default: () => []
  },
  formColCount: { // 表单的列数
    type: Number,
    default: 1
  },
  reload: {
    type: Boolean, // 是否从新加载配置，须要来回取反
    default: false
  },
  itemMeta: {
    type: Object, // 表单子控件的属性
    default: () => {}
  },
  ruleMeta: { // 验证信息
    type: Object, 
    default: () => {}
  },
  formColShow: { // 数据变化，联动组件是否显示
    type: Object,
    default: () => {}
  } 
}
复制代码

定义内部model

通常一个 model 就能够，只是这里作了一个组件联动的，那么若是只须要获取可见的组件的值呢，因而作了局部model。

实现多行多列和布局调整

采用 el-col 实现，经过控制 span 来实现多列，因此理论上最多支持24列，固然这个要看屏幕宽度了。

/** * 处理一个字段占用几个td的需求 * @param { object } props 表单组件的属性 * @returns  */
const getColSpan = (props) => {
  // 肯定一个组件占用几个格子
  const formColSpan = reactive({})
  
  // 表单子控件的属性
  const formItemProps = props.itemMeta

  // 根据配置里面的colCount，设置 formColSpan
  const setFormColSpan = () => {
    const formColCount = props.formColCount // 列数
    const moreColSpan = 24 / formColCount // 一个格子占多少份

    if (formColCount === 1) {
    // 一列的状况
      for (const key in formItemProps) {
        const m = formItemProps[key]
        if (typeof m.colCount === 'undefined') {
          formColSpan[m.controlId] = moreColSpan
        } else {
          if (m.colCount >= 1) {
            // 单列，多占的也只有24格
            formColSpan[m.controlId] = moreColSpan
          } else if (m.colCount < 0) {
            // 挤一挤的状况， 24 除以 占的份数
            formColSpan[m.controlId] = moreColSpan / (0 - m.colCount)
          }
        }
      }
    } else {
      // 多列的状况
      for (const key in formItemProps) {
        const m = formItemProps[key]
        if (typeof m.colCount === 'undefined') {
          formColSpan[m.controlId] = moreColSpan
        } else {
          if (m.colCount < 0 || m.colCount === 1) {
            // 多列，挤一挤的占一份
            formColSpan[m.controlId] = moreColSpan
          } else if (m.colCount > 1) {
            // 多列，占的格子数 * 份数
            formColSpan[m.controlId] = moreColSpan * m.colCount
          }
        }
      }
    }
  }

  return {
    formColSpan,
    setFormColSpan
  }
}
复制代码

首先计算一下一列要用多少个span，也就是用24除以列数。而后判断是否是单列，单列要处理多个组件占用一个位置的需求，多列要处理一个组件占用多个位置的需求。

实现扩展

表单子控件能够多种多样，没法彻底封装进入表单控件，那么就须要表单控件支持子控件的扩展。这里要感谢 vue 的动态组件功能，让扩展子控件变得很是方便。

咱们使用 component 和动态组件来实现表单子控件的加载。

<component :is="formItemListKey[getCtrMeta(ctrId).controlType]" v-model="formModel[getCtrMeta(ctrId).colName]" v-bind="getCtrMeta(ctrId)" @my-change="myChange">
  </component>
复制代码

export const formItemList = {
  // 文本类 defineComponent
  'el-form-text': defineAsyncComponent(() => import('./t-text.vue')),
  'el-form-area': defineAsyncComponent(() => import('./t-area.vue')),
  'el-form-url': defineAsyncComponent(() => import('./t-url.vue')),
  'el-form-password': defineAsyncComponent(() => import('./t-password.vue')),
  // 数字
  'el-form-number': defineAsyncComponent(() => import('./n-number.vue')),
  'el-form-range': defineAsyncComponent(() => import('./n-range.vue')),
  // 日期、时间
  'el-form-date': defineAsyncComponent(() => import('./d-date.vue')),
  'el-form-datetime': defineAsyncComponent(() => import('./d-datetime.vue')),
  'el-form-year': defineAsyncComponent(() => import('./d-year.vue')),
  'el-form-month': defineAsyncComponent(() => import('./d-month.vue')),
  'el-form-week': defineAsyncComponent(() => import('./d-week.vue')),
  'el-form-time-select': defineAsyncComponent(() => import('./d-time-select.vue')),
  'el-form-time-picker': defineAsyncComponent(() => import('./d-time-picker.vue')),
  // 选择、开关
  'el-form-checkbox': defineAsyncComponent(() => import('./s-checkbox.vue')),
  'el-form-switch': defineAsyncComponent(() => import('./s-switch.vue')),
  'el-form-checkboxs': defineAsyncComponent(() => import('./s-checkboxs.vue')),
  'el-form-radios': defineAsyncComponent(() => import('./s-radios.vue')),
  'el-form-select': defineAsyncComponent(() => import('./s-select.vue')),
  'el-form-selwrite': defineAsyncComponent(() => import('./s-selwrite.vue')),
  'el-form-select-cascader': defineAsyncComponent(() => import('./s-select-cascader.vue'))

}

/** * 动态组件的字典，便于v-for循环里面设置控件 */
export const formItemListKey = {
  // 文本类
  100: formItemList['el-form-area'], // 多行文本
  101: formItemList['el-form-text'], // 单行文本
  102: formItemList['el-form-password'], // 密码
  103: formItemList['el-form-text'], // 电话
  104: formItemList['el-form-text'], // 邮件
  105: formItemList['el-form-url'], // url
  106: formItemList['el-form-text'], // 搜索
  // 数字
  120: formItemList['el-form-number'], // 数字
  121: formItemList['el-form-range'], // 滑块
  // 日期、时间
  110: formItemList['el-form-date'], // 日期
  111: formItemList['el-form-datetime'], // 日期 + 时间
  112: formItemList['el-form-month'], // 年月
  113: formItemList['el-form-week'], // 年周
  114: formItemList['el-form-year'], // 年
  115: formItemList['el-form-time-picker'], // 任意时间
  116: formItemList['el-form-time-select'], // 选择固定时间
  // 选择、开关
  150: formItemList['el-form-checkbox'], // 勾选
  151: formItemList['el-form-switch'], // 开关
  152: formItemList['el-form-checkboxs'], // 多选组
  153: formItemList['el-form-radios'], // 单选组
  160: formItemList['el-form-select'], // 下拉
  161: formItemList['el-form-selwrite'], // 下拉多选
  162: formItemList['el-form-select-cascader'] // 下拉联动
}
复制代码

须要扩展子控件的时候，咱们只须要向字典（dict）里面添加须要的组件便可，而后设置一个新的编号。

// 添加临时动态组件
  formProps.customerControl = {
    300: 'el-transfer'
  }
  // 设置表单字段
  childMeta.select.controlType = 300
复制代码

为啥用编号？虽然编号不易读，可是编号稳定，并且灵活。若是咱们要基于ant design Vue 封装控件的话，我能够直接用编号，可是若是用名称的话，那么要不要区分 el- 和 a- 呢？

实现数据联动

联动分为数据联动，和组件联动，数据联动能够依赖UI库的组件来实现，或者依赖Vue的数据的响应性来实现。好比常见的省市区县联动，咱们能够用 el-cascader。若是须要使用多个组件的话，咱们能够监听组件的值的变化，而后获取数据绑定下一个组件的options。

// 数据联动
  watch (() => model.provinces, (v1, v2) => {
    console.log('监听值的变化', v1)
    const arr = [
      {"value": 1 + v1, "label": "多选 选项一" + v1},
      {"value": 2 + v1, "label": "多选 选项二" + v1}
    ]
  
    childMeta.city.optionList.length = 0
    childMeta.city.optionList.push(...arr)
  })
复制代码

Vue 就是数据驱动的，因此联动的话也是直接监听value的改变便可，不用像之前那样要设置change事件了。

实现组件联动

组件联动，就是一个组件的值发生变化，影响其余组件的显示状态。

好比在注册的时候，须要选择企业用户仍是我的用户。若是是企业用户，须要添加企业名称（以及相关信息）；若是是我的注册那么只须要填写我的姓名便可。

这样表单里面显示的组件就要随之变化。

对于这类的需求，咱们能够配置一下 formColShow 属性。

"formColShow": {
      "90": {  // 组件ID
        "1": [90, 101, 100, 102, 105],  // 组件值对应的须要显示的组件ID，下同
        "2": [90, 120, 121],
        "3": [90, 110, 114, 112, 113, 115, 116],
        "4": [90, 150, 151, 152, 153, 160, 162]
      }
    },
复制代码

配置好以后就能够实现了，表单控件内部代码会作一个 watch 监听：

// 数据变化，联动组件的显示
  if (typeof props.formColShow !== 'undefined') {
    for (const key in props.formColShow) {
      const ctl = props.formColShow[key]
      const colName = props.itemMeta[key].colName
      // 监听组件的值，有变化就从新设置局部model
      watch(() => formModel[colName], (v1, v2) => {
        if (typeof ctl[v1] === 'undefined') {
          // 没有设定，显示默认组件
          setFormColSort()
        } else {
          // 按照设定显示组件
          setFormColSort(ctl[v1])
          // 设置部分的 model
          createPartModel(ctl[v1])
        }
      })
    }
复制代码

json格式

整个表单是依据 json 动态渲染出来的，那么json格式是啥样的呢？分为两个部分，一个是表单控件本身须要的属性，另外一个是表单子控件须要的属性，还有验证规则等。

{
  "formTest": {
    "baseProps": { // 表单控件本身的属性
      "formColCount": 1, // 列数
      "colOrder": [ // 须要显示的组件的ID
        90,  101, 102,
        110, 111, 114, 112, 113, 115, 116,
        120, 121, 100, 
        150, 151, 152, 153,
        160, 162
      ]
    },
    "formColShow": { // 组件联动的信息
      "90": { // 触发的组件
        "1": [90, 101, 100, 102, 105], // 组件值对应的须要显示的组件的ID
        "2": [90, 120, 121],
        "3": [90, 110, 114, 112, 113, 115, 116],
        "4": [90, 150, 151, 153, 152, 160, 162]
      }
    },
    "ruleMeta": { // 验证规则
      "101": [ // 表单子控件的ID，下面是验证规则
        { "trigger": "blur", "message": "请输入活动名称", "required": true },
        { "trigger": "blur", "message": "长度在 3 到 5 个字符", "min": 3, "max": 5 }
      ]
    },
    "itemMeta": { // 表单子控件的属性
      "90": {  
        "controlId": 90,
        "colName": "kind",
        "label": "分类",
        "controlType": 153,
        "isClear": false,
        "defaultValue": "",
        "placeholder": "分类",
        "title": "编号",
        "optionList": [
          {"value": 1, "label": "文本类"},
          {"value": 2, "label": "数字类"},
          {"value": 3, "label": "日期类"},
          {"value": 4, "label": "选择类"}
        ],
        "colCount": 1
      },
      "100": {  
        "controlId": 100,
        "colName": "area",
        "label": "多行文本",
        "controlType": 100,
        "isClear": false,
        "defaultValue": 1000,
        "placeholder": "多行文本",
        "title": "多行文本",
        "colCount": 1
      },
      ...
    }
  }
}
复制代码

遍历子控件

由于子控件都封装好了，因此只须要简单遍历便可：

<el-form
    :model="formModel"
    :rules="rules"
    ref="formControl"
    :inline="false"
    class="demo-form-inline"
    label-suffix="："
    label-width="130px"
    size="mini"
  >
    <el-row> <!--不循环row，直接循环col，放不下会自动往下换行。--> <el-col v-for="(ctrId, index) in formColSort" :key="'form_'+index" :span="formColSpan[ctrId]" ><!--:prop="getCtrMeta(ctrId).colName"--> <el-form-item :label="getCtrMeta(ctrId).label" :prop="getCtrMeta(ctrId).colName" > <!--判断要不要加载插槽--> <template v-if="getCtrMeta(ctrId).controlType === 1"> <!--<slot :name="ctrId">父组件没有设置插槽</slot>--> <slot :name="getCtrMeta(ctrId).colName">父组件没有设置插槽</slot> </template> <!--表单item组件，采用动态组件的方式--> <template v-else> <component :is="dictControl[getCtrMeta(ctrId).controlType]" v-model="formModel[getCtrMeta(ctrId).colName]" v-bind="getCtrMeta(ctrId)" @my-change="myChange"> </component> </template> </el-form-item> </el-col> </el-row>
  </el-form>
复制代码

篇幅有限没法一一介绍，其余部分能够看源码。

源码

gitee.com/naturefw/nf…

基于 el-form 封装一个依赖 json 动态渲染的表单控件