vue封装动态表单组件，可外部配置表单项事件

动态配置的表单组件常见，但手动封装的动态表单组件如何实现表单项事件也可外部配置是一个常见难题，下面这个组件可以利用高阶函数实现表单项基本事件外部配置，也许可以给大家一点思路，如果大家喜欢或者感觉有帮助就给文章点个赞吧~

一、封装组件代码

<template>
  <div class="form" v-if="formConfig">
    <el-form
      ref="formDom"
      :model="formData"
      :rules="formRules"
      :inline="inline"
      :label-width="labelWidth"
      :label-position="labelPosition"
    >
      <el-form-item
        v-for="(item, key, index) in formConfig"
        :key="key"
        :label="item.label"
        :label-width="item.labelWidth || '100'"
        :prop="key"
        :style="item.style"
        v-if="!item.hide"
      >
        <!-- 只列出focus blur change事件举例，更多事件可以自行添加绑定 -->
         <el-input
          v-if="item.type === 'input'"
          v-model="formData[key]"
          :disabled="item.disabled"
          :type="item.inputType ? item.inputType : 'text'"
          :placeholder="item.placeholder || `请输入${item.label}`"
          clearable
          @focus="(e) => issueEvent(e, item.onFocus)"
          @blur="(e) => issueEvent(e, item.onBlur)"
          @change="(e) => issueEvent(e, item.onChange)"
        />

        <el-sele