vue复杂的form表单封装和使用

<template> <el-form :ref="myConfig.ref" :model="myFormData" :size="myConfig.size" class="text-left" :rules="formRules" :label-width="myConfig.labelWidth" :validate-on-rule-change="false" :inline="myConfig.inlineFlag" > <template v-for="(item,$index) in itemList"> <el-form-item :class="item.class" :style="{width:item.width}" :label="item.label" :prop="item.prop" :key="$index" v-if="(typeof(item.show)=='function'?item.show():(item.show!=undefined?item.show:true))" > <!--表单label--> <template v-if="item.slot&&typeof(item.labelFun) == 'function'" slot='label'> <span v-html='item.labelFun()'></span> </template> <!--表单前缀--> <template v-if="item.slot&&(item.slotType=='prepend'||(typeof(item.slotType)=='object'&&item.slotType.indexOf('prepend')!=-1))"> <slot :name="(item.slotName?item.slotName:item.prop)+'-prepend'" :data="item" /> </template> <!-- 输入框 --> <el-input v-if="item.type==='input'" v-model="myFormData[item.prop]" :disabled="(typeof(item.disabled)=='function'?item.disabled():item.disabled)" :placeholder="item.placeholder?item.placeholder:''" @change="handleEvent(item.event,myFormData[item.prop],$index)" ></el-input> <!-- 数字输入框 --> <el-input v-if="item.type==='number'" v-model="myFormData[item.prop]" type='number' :disabled="item.disabled" :placeholder="item.placeholder?item.placeholder:''" @change="handleEvent(item.event,myFormData[item.prop],$index)" ></el-input> <!-- 密码框 --> <el-input v-if="item.type==='password'" type='password' show-password v-model="myFormData[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder?item.placeholder:''" ></el-input> <!-- 文本域 --> <el-input v-if="item.type==='textarea'" type="textarea" :disabled="item.disabled" v-model="myFormData[item.prop]" :placeholder="item.placeholder?item.placeholder:''" :maxlength="item.maxlength?item.maxlength:''" :show-word-limit="item.limit?item.limit:false" @blur="handleEvent(item.event,myFormData[item.prop],$index)" ></el-input> <!-- 下拉框 --> <template> <el-select v-if="item.type==='select'" :filterable="item.filterable?item.filterable:false" :multiple="item.multiple" :reserve-keyword="item.reserveKeyword" v-model="myFormData[item.prop]" :disabled="(typeof(item.disabled)=='function'?item.disabled():item.disabled)" :class="item.class" @change="handleEvent(item.event,myFormData[item.prop],$index)" > <el-option v-for="(op, index) in item.options" :label="item.optionLabel?op[item.optionLabel]:(op.label?op.label:op)" :value="item.optionValue?op[item.optionValue]:(op.value?op.value:op)" :key="index" ></el-option> </el-select> </template> <!-- 单选 --> <el-radio-group v-if="item.type==='radio'" v-model="myFormData[item.prop]" :disabled="item.disabled" @change="handleEvent(item.event,myFormData[item.prop],$index)" > <el-radio v-for="(ra,index) in item.radios" :label="ra.value?ra.value:ra" :key="index">{{ra.label?ra.label:ra}}</el-radio> </el-radio-group> <!-- 复选框--> <template v-if="item.type=='checkbox'&&item.isSingle"> <el-checkbox v-model="myFormData[item.prop]" :disabled="item.disabled" @change="handleEvent(item.event,myFormData[item.prop],$index)"> <template v-if="item.slot"> <slot :name="item.prop" :data="item" /> </template> <template v-else>{{item.checkboxLabel?item.checkboxLabel:item.label}}</template> </el-checkbox> </template> <!-- 复选框组--> <el-checkbox-group @change="handleEvent(item.event,myFormData[item.prop],$index)" v-if="item.type==='checkbox'&&(!item.isSingle)" v-model="myFormData[item.prop]" :disabled="item.disabled" > <el-checkbox v-for="(ch,index) in item.checkboxs" :label="item.checkboxLabel?ch[item.checkboxLabel]:ch.value?ch.value:ch" :key="index">{{item.checkboxLabel?ch[item.checkboxLabel]:ch.label?ch.label:ch}}</el-checkbox> </el-checkbox-group> <!-- 日期 --> <el-date-picker v-if="item.type==='date'" v-model="myFormData[item.prop]" :value-format="item.valueFormat" :disabled="item.disabled" ></el-date-picker> <!-- 时间 --> <el-time-picker v-if="item.type==='time'" v-model="myFormData[item.prop]" :disabled="item.disabled" ></el-time-picker> <!-- 日期时间 --> <el-date-picker v-if="item.type==='dateTime'" type="datetime" v-model="myFormData[item.prop]" :disabled="item.disable" ></el-date-picker> <!-- 日期范围 --> <el-date-picker v-if="item.type==='daterange'" type="daterange" v-model="myFormData[item.prop]" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled="item.disabled" @change="handleEvent(item.event,myFormData[item.prop],$index)" ></el-date-picker> <!-- 开关 --> <el-switch v-if="item.type==='switch'" v-model="myFormData[item.prop]" :disabled="item.disabled" ></el-switch> <!-- slot--> <template v-if="item.type==='slot'"> <slot :name="item.slotName?item.slotName:item.prop" :data="item" /> </template> <!-- 文件 --> <el-upload v-if="item.type==='file'" class="upload-demo" :ref="item.ref" action :limit="item.limit" :file-list="myFormData[item.prop]" :auto-upload="item.autoUpload" :disabled="item.disabled" :accept="item.accept" :on-change="(file)=>{return changeFile(file,item,$index)}" :on-exceed="(files, fileList)=>{return handleExceed(files, fileList,item)}" :before-remove="(files, fileList)=>{return handleRmove(files, fileList,item)}" > <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> --> <i slot="trigger" class="el-icon-upload self-icon-upload"></i> <template v-if='typeof(item.tip) == "function"'> <div slot="tip" class="el-upload__tip">{{item.tip()}}</div> </template> <template v-else> <div slot="tip" class="el-upload__tip">{{item.tip}}</div> </template> </el-upload> <!--tag标签--> <!-- <template class="tag-group" v-if="item.type==='tag'"> <el-tag v-for="(op,i) in item.options" :key="i" :type="typeof(item.config.type)=='string'?item.config.type:item.config.type[i]" :effect="typeof(item.config.effect)=='string'?item.config.effect:item.config.effect[i]" :closable="item.closable" @click="handleEvent(item.clickEvent,item.key?op[item.key]:op,$index)" @close="handleEvent(item.event,item.key?op[item.key]:op,$index)" >{{ item.key?op[item.key]:op }}</el-tag> </template> --> <template class="tag-group" v-if="item.type==='tag'"> <el-tooltip v-for="(op,i) in item.options" :key="i" placement="bottom" effect="light"> <div slot="content">{{(item.sample=='groupSample')?op[item.sample]:item.sample[op]}}</div> <el-tag :type="typeof(