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

封装表单子控件

表单控件需要很多子控件,所以要先封装一下子控件,然后才方便封装表单控件。

定义接口,统一规范

表单子控件有一个相同的需求,都需要实现属性和 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。

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>

USB Microphone https://www.soft-voice.com/

Wooden Speakers  https://www.zeshuiplatform.com/

亚马逊测评 www.yisuping.cn

深圳网站建设www.sz886.com

推荐阅读更多精彩内容