vue+antd 通用表单模板开发

日常开发中涉及到较多表单功能，如何设计一模板，传递一JSON字符内容，即可呈现对应表单，对提升开发效率和降低开发难度有较大帮助，因此设计常规表单需解决包含表单组件、表单验证、表单提交等元素

源码地址

演示效果 账号: admin 密码: 123456

一、设计动态表单组件

 <div v-if="!modalFnData[formItem.model]" class="div_text" :class="formItem.divStyle">{{ showText(formItem, activeEnumList) }} </div>
    <a-input
      v-show="modalFnData[formItem.model]"
      v-if="formItem.compTag === 'text'"
      v-model="modalForm[`${formItem.model}`]"
      :prefix="formItem.prefix"
      :suffix="formItem.suffix"
      :addon-before="formItem.addonBefore"
      :addon-after="formItem.addonAfter"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      @change="onInputChange(formItem)"
      @pressEnter="onInputPressEnter(formItem)"
    ></a-input>
    <a-input
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'textIcon'"
      v-model="modalForm[`${formItem.model}`]"
      :prefix="formItem.prefix"
      :suffix="formItem.suffix"
      :addon-before="formItem.addonBefore"
      :addon-after="formItem.addonAfter"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      @change="onInputChange(formItem)"
      @pressEnter="onInputPressEnter(formItem)"
      :defaultValue="formItem.defVal"
    >
      <a-icon v-if="formItem.prefixIcon !== undefined" slot="prefix" :type="formItem.prefixIcon" />
      <a-icon v-if="formItem.suffixIcon !== undefined" slot="suffix" :type="formItem.suffixIcon" />
      <a-icon v-if="formItem.addonBeforeIcon !== undefined" slot="addonBefore" :type="formItem.addonBeforeIcon" />
      <a-tooltip v-if="formItem.tooltipTitle !== undefined" slot="suffix" :title="formItem.tooltipTitle">
        <a-icon v-if="formItem.tooltipIcon !== undefined" :type="formItem.tooltipIcon" style="color: rgba(0,0,0,.45)" />
      </a-tooltip>
      <a-icon v-if="formItem.addonAfterIcon !== undefined" slot="addonAfter" :type="formItem.addonAfterIcon" />
      <a-select
        v-if="formItem.addonBeforeCompItem !== undefined && formItem.addonBeforeCompItem.compTag === 'select'"
        v-show="modalFnData[formItem.addonBeforeCompItem.model]"
        slot="addonBefore"
        v-model="modalForm[`${formItem.addonBeforeCompItem.model}`]"
        style="width: 90px"
        @change="onSelectChange(formItem.addonBeforeCompItem)"
        @select="onSelectSelect(formItem.addonBeforeCompItem)"
        :defaultValue="formItem.defVal"
      >
        <a-select-option v-for="(data, i) in beforeActiveEnumList" :key="data.value">{{ data.text }}</a-select-option>
      </a-select>
      <a-select
        v-if="formItem.addonAfterCompItem !== undefined && formItem.addonAfterCompItem.compTag === 'select'"
        v-show="modalFnData[formItem.addonAfterCompItem.model]"
        slot="addonAfter"
        v-model="modalForm[`${formItem.addonAfterCompItem.model}`]"
        style="width: 80px"
        @change="onSelectChange(formItem.addonAfterCompItem)"
        @select="onSelectSelect(formItem.addonAfterCompItem)"
        :defaultValue="formItem.defVal"
      >
        <a-select-option v-for="(data, i) in afterActiveEnumList" :key="data.value">{{ data.text }}</a-select-option>
      </a-select>
    </a-input>

 <a-input-search
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'inputSearch'"
      v-model="modalForm[`${formItem.model}`]"
      :prefix="formItem.prefix"
      :suffix="formItem.suffix"
      :addon-before="formItem.addonBefore"
      :addon-after="formItem.addonAfter"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      @search="onInputSearch"
    />

    <a-input-search
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'inputSearchButton'"
      v-model="modalForm[`${formItem.model}`]"
      enter-button="查询"
      :prefix="formItem.prefix"
      :suffix="formItem.suffix"
      :addon-before="formItem.addonBefore"
      :addon-after="formItem.addonAfter"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      @search="onInputSearch"
    />
    <a-input-group v-else-if="formItem.compTag === 'inputGroup'" compact>
      <a-select
        v-for="(groupItem,itemIndex) in formItem.groupItems"
        v-show="modalFnData[groupItem.model]"
        v-if="groupItem !== undefined && groupItem.compTag === 'select'"
        :key="groupItem.model"
        :style="groupItem.inputStyle"
        v-model="modalForm[`${groupItem.model}`]"
        allow-clear
        :placeholder="groupItem.placeholder"
        :defaultValue="formItem.defVal"
      >
        <a-select-option v-for="(data, i) in activeEnumData[groupItem.data]" :key="data.value">{{ data.text }}</a-select-option>
      </a-select>
      <a-input
        v-for="(groupItem,itemIndex) in formItem.groupItems"
        v-show="modalFnData[groupItem.model]"
        v-if="groupItem !== undefined && groupItem.compTag === 'text'"
        :key="groupItem.model"
        v-model="modalForm[`${groupItem.model}`]"
        :style="groupItem.inputStyle"
        :prefix="groupItem.prefix"
        :suffix="groupItem.suffix"
        :addon-before="groupItem.addonBefore"
        :addon-after="groupItem.addonAfter"
        allow-clear
        :placeholder="groupItem.placeholder"
        @change="onInputChange(groupItem)"
        @pressEnter="onInputPressEnter(groupItem)"
        :defaultValue="formItem.defVal"
      />
    </a-input-group>

<a-rate
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'rate'"
      v-model="modalForm[`${formItem.model}`]"
      :character="formItem.character"
      :count="formItem.count"
      :allow-half="formItem.allowHalf"
      :tooltips="formItem.tooltips"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      :defaultValue="formItem.defVal"
    />
    <a-rate
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'rateIcon'"
      v-model="modalForm[`${formItem.model}`]"
      :count="formItem.count"
      :allow-half="formItem.allowHalf"
      :tooltips="formItem.tooltips"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      :defaultValue="formItem.defVal"
    >
      <a-icon slot="character" :type="formItem.character" />
    </a-rate>
    <a-slider
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'slider'"
      :tip-formatter="changeSliderFormatter"
      :min="formItem.min"
      :max="formItem.max"
      :step="formItem.step"
      v-model="modalForm[`${formItem.model}`]"
      :dots="formItem.dots"
      :included="formItem.included"
      :reverse="formItem.reverse"
      :vertical="formItem.vertical"
      :range="formItem.range"
      :tooltip-visible="formItem.tooltipVisible"
      :tooltip-placement="formItem.tooltipPlacement"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      :defaultValue="formItem.defVal"
    />

二、数据结构