vue+Ts+element组件封装

#Typora快捷键

#Vue 公用组件使用说明

MyForm表单

对element-ui 中 form表单的二次封装支持如下模块

下面的代码封装支持 栅格布局 -普通常规布局

<!--
* @Author: ruanjiafeng
* @Date: 2020-08-11 09:26:11
* @LastEditTime: 2020-10-13 08:41:08
* @LastEditors: Please set LastEditors
* @Description: form 表单封装
* @FilePath: \tyt-manage-h5\src\components\utils\MyForm.vue
-->
<template>
 <el-form
   :ref="refName"
   :size="size"
   :inline="inline"
   :label-width="labelWidth"
   :model="formData"
   :rules="myFormRules"
   :label-position="labelPosition"
   :class="myFormClass"
 >
   <!-- --------------------自定义行布局------------------- -->
   <!-- (xs <768px) (sm ≥768px) (md	≥992px ) (lg ≥1200px) (xl ≥1920px)-->
   <template v-if="customStyle">
     <template v-for="(formCfgItem, index) in formCfg">
       <el-row :key="index">
         <template v-for="(item, index) in formCfgItem">
           <el-col
             :key="index"
             :xs="customCol[0] || null"
             :sm="customCol[1] || null"
             :md="customCol[2] || null"
             :lg="customCol[3] || null"
             :xl="customCol[4] || null"
           >
             <el-form-item
               v-if="!item.hide"
               :label="item.label"
               :style="item.style"
               :label-width="item.labelWidth"
               :prop="getProp(item, index)"
               :key="item.prop"
               :class="getFormItemClass(item)"
             >
               <!-- 如果是myFormDialog自定义-并且设isFormDialog:true-->
               <template v-if="item.type === 'custom'">
                 <slot :name="item.prop" :item="item"></slot>
               </template>
               <!-- 渲染自定义标题:标签 -->
               <!-- 释:
         { customLabel: '销售价：<br/>(最低建议销售价)', type: 'custom', prop: '表单所定义的prop', }
        -->
               <template v-if="item.customLabel || item.labelFormatter">
                 <slot slot="label">
                   <div
                     class="custom_label"
                     v-html="getCustomLabel(item)"
                   ></div>
                 </slot>
               </template>
               <!-- 如果不是type:title 标题 -->
               <template v-if="item.type != 'title' && item.type !== 'custom'">
                 <!-- 输入框 -->
                 <el-input
                   v-if="item.type === 'input' || item.type === 'password'"
                   v-model="formData[item.prop]"
                   @change="item.change && item.change(formData[item.prop])"
                   :disabled="item.disabled"
                   :type="item.inputType"
                   :maxlength="item.maxlength"
                   :style="{ width: item.width }"
                   :placeholder="getInputPlaceholder(item.placeholder)"
                 ></el-input>
                 <!-- 文本域 -->
                 <el-input
                   v-else-if="item.type === 'textarea'"
                   type="textarea"
                   :disabled="item.disabled"
                   @change="item.change && item.change(formData[item.prop])"
                   :placeholder="getInputPlaceholder(item.placeholder)"
                   :maxlength="item.maxlength"
                   :show-word-limit="item.maxlength ? true : false"
                   :autosize="getTextareaAutosize(item)"
                   v-model="formData[item.prop]"
                   :style="{ width: item.width }"
                 ></el-input>
                 <!-- 下拉框 -->
                 <el-select
                   v-else-if="item.type === 'select'"
                   v-model="formData[item.prop]"
                   :style="{ width: item.width ? item.width : '100%' }"
                   @change="item.change && item.change(formData[item.prop])"
                   :disabled="item.disabled"
                   :placeholder="getSelectPlaceholder(item.placeholder)"
                 >
                   <!-- 下拉框option选项 -->

                   <el-option
                     v-for="(op, opIndex) in item.options"
                     :label="item.valueMap ? op[item.valueMap[1]] : op.value"
                     :value="item.valueMap ? op[item.valueMap[0]] : op.key"
                     :key="
                       item.valueMap + opIndex
                         ? op[item.valueMap[0]] + opIndex
                         : op.key + opIndex
                     "
                   ></el-option>
                 </el-select>
                 <!-- 单选 -->
                 <el-radio-group
                   v-else-if="item.type === 'radio'"
                   v-model="formData[item.prop]"
                   @change="item.change && item.change(formData[item.prop])"
                   :disabled="item.disabled"
                 >
                   <el-radio
                     v-for="ra in item.radios"
                     :label="item.valueMap ? ra[item.valueMap[1]] : ra.value"
                     :key="item.valueMap ? ra[item.valueMap[0]] : ra.key"
                   >
                     {
  { item.valueMap ? ra[item.valueMap[1]] : ra.value }}
                   </el-radio>
                 </el-radio-group>
                 <!-- 单选按钮 -->
                 <el-radio-group
                   v-else-if="item.type === 'radioButton'"
                   v-model="formData[item.prop]"
                   @change="item.change && item.change(formData[item.prop])"
                   :disabled="item.disabled"
                 >
                   <el-radio-button
                     v-for="ra in item.radios"
                     :label="item.valueMap ? ra[item.valueMap[1]] : ra.value"
                     :key="item.valueMap ? ra[item.valueMap[0]] : ra.key"
                   >
                     {
  { item.valueMap ? ra[item.valueMap[1]] : ra.value }}
                   </el-radio-button>
                 </el-radio-group>
                 <!-- 复选框 -->
                 <el-checkbox-group
                   v-else-if="item.type === 'checkbox'"
                   v-model="formData[item.prop]"
                   @change="item.change && item.change(formData[item.prop])"
                   :disabled="item.disabled"
                 >
                   <el-checkbox
                     v-for="ch in item.checkboxs"
                     :label="item.valueMap ? ch[item.valueMap[0]] : ch.key"
                     :key="item.valueMap ? ch[item.valueMap[0]] : ch.key"
                     :border="item.border"
                     >{
  {
                       item.valueMap ? ch[item.valueMap[1]] : ch.value
                     }}</el-checkbox
                   >
                 </el-checkbox-group>
                 <!-- 日期 -->
                 <el-date-picker
                   v-else-if="item.type === 'date'"
                   v-model="formData[item.prop]"
                   @change="item.change && item.change(formData[item.prop])"
                   :disabled="item.disabled"
                 ></el-date-picker>
                 <!-- 时间 -->
                 <el-time-select
                   v-else-if="item.type === 'time'"
                   v-model="formData[item.prop]"
                   @change="item.change && item.change(formData[item.prop])"
                   :disabled="item.disabled"
                 >
                 </el-time-select>
                 <!-- 日期时间 -->
                 <el-date-picker
                   v-else-if="item.type === 'datetime'"
                   type="datetime"
                   v-model="formData[item.prop]"
                   :prop="item.prop[0]"
                   @change="item.change && item.change(formData[item.prop])"
                   :placeholder="
                     item.placeholder ? item.placeholder[0] : '开始时间'
                   "
                   :disabled="item.disabled"
                 ></el-date-picker>
                 <!-- 日期区间 -格式显示为:2020-02-05 12:20:35  返回时间戳:1598404858000格式-->
                 <template v-else-if="item.type === 'datetimerange'">
                   <el-col :span="11">
                     <el-form-item
                       class="mr0"
                       :picker-options="
                         dateConfig ? dateConfig.pickerOptionsStart : null
                       "
                       :prop="item.prop[0]"
                     >
                       <el-date-picker
                         style="width: 100%"
                         type="datetime"
                         v-model="formData[item.prop[0]]"
                         @change="
                           datetimerangeValue =>
                             datetimerangeChange(item, datetimerangeValue, 0)
                         "
                         :placeholder="
                           item.placeholder ? item.placeholder[0] : '开始时间'
                         "
                         :disabled="item.disabled"
                       ></el-date-picker>
                     </el-form-item>
                   </el-col>
                   <el-col :span="1"
                     ><span class="yzf_telephone_line">-</span></el-col
                   >
                   <el-col :span="12">
                     <el-form-item :prop="item.prop[1]">
                       <el-date-picker
                         :picker-options="
                           dateConfig ? dateConfig.pickerOptionsEnd : null
                         "
                         style="width: 100%"
                         type="datetime"
                         v-model="formData[item.prop[1]]"
                         @change="
                           datetimerangeValue =>
                             datetimerangeChange(item, datetimerangeValue, 1)
                         "
                         :placeholder="
                           item.placeholder ? item.placeholder[1] : '结束时间'
                         "
                         :disabled="item.disabled"
                       ></el-date-picker>
                     </el-form-item>
                   </el-col>
                 </template>
                 <!-- 日期区间 -格式显示: 2020-02-05 -->
                 <template v-else-if="item.type === 'ordinaryDate'">
                   <el-col :span="11">
                     <el-form-item
                       class="mr0"
                       :picker-options="
                         dateConfig ? dateConfig.pickerOptionsStart : null
                       "
                       :prop="item.prop[0]"
                     >
                       <el-date-picker
                         style="width: 100%"
                         v-model="formData[item.prop[0]]"
                         @change="
                           ordinaryValue =>
                             ordinaryDateChange(item, ordinaryValue, 0)
                         "
                         :placeholder="
                           item.placeholder ? item.placeholder[0] : '开始时间'
                         "
                         :disabled="item.disabled"
                       ></el-date-picker>
                     </el-form-item>
                   </el-col>
                   <el-col :span="1"
                     ><span class="yzf_telephone_line">-</span></el-col
                   >
                   <el-col :span="12">
                     <el-form-item :prop="item.prop[1]">
                       <el-date-picker
                         :picker-options="
                           dateConfig ? dateConfig.pickerOptionsEnd : null
                         "
                         style="width: 100%"
                         v-model="formData[item.prop[1]]"
                         @change