概况:
项目中表格总会涉及到一些查询条件,可以封装成一个组件,到时候直接调用,可以省掉很多重复的代码,样式保持统一,修改起来也方便,不用去每个设计的界面中都进行修改。
项目中的表单也可以使用该组件,对于数据的效验可以通过formRules进行设置
对于复杂表单的封装,可以到vue复杂的form表单封装和使用-Javascript文档类资源-CSDN下载进行下载
下面是我封装好的查询组件,包含基本的输入框、文本域、下拉框、单选、多选、日期、按钮等:
<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]"
suffix-icon='xxxx'
:disabled="(typeof(item.disabled)=='function'?item.disabled():item.disabled)"
:placeholder="item.placeholder?item.placeholder:''"
@change="item.change && item.change(item.prop)"