vue实现查询组件的封装

概况：

项目中表格总会涉及到一些查询条件，可以封装成一个组件，到时候直接调用，可以省掉很多重复的代码，样式保持统一，修改起来也方便，不用去每个设计的界面中都进行修改。

项目中的表单也可以使用该组件，对于数据的效验可以通过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-inputv-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)"></el-input><!-- 数字输入框 --><el-inputv-if="item.type==='number'"v-model="myFormData[item.prop]"type='number':disabled="item.disabled":placeholder="item.placeholder?item.placeholder:''"@change="item.change && item.change(item.prop)"></el-input><!-- 密码框 --><el-inputv-if="item.type==='password'"type='password'show-passwordv-model="myFormData[item.prop]":disabled="item.disabled":placeholder="item.placeholder?item.placeholder:''"></el-input><!-- 文本域 --><el-inputv-if="item.type==='textarea'"type="textarea":disabled="item.disabled"v-model="myFormData[item.prop]":placeholder="item.placeholder?item.placeholder:''"@change="item.change && item.change(item.prop)"></el-input><!-- 下拉框 --><template><el-selectv-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="item.change && item.change(item.prop)"><el-optionv-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-groupv-if="item.type==='radio'"v-model="myFormData[item.prop]":disabled="item.disabled"@change="item.change && item.change(item.prop)"><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="item.change && item.change(item.prop)"><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="item.change && item.change(item.prop)"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-pickerv-if="item.type==='date'"v-model="myFormData[item.prop]":disabled="item.disabled"></el-date-picker><!-- 时间 --><el-time-pickerv-if="item.type==='time'"v-model="myFormData[item.prop]":disabled="item.disabled"></el-time-picker><!-- 日期时间 --><el-date-pickerv-if="item.type==='dateTime'"type="datetime"v-model="myFormData[item.prop]":disabled="item.disable"></el-date-picker><!-- 日期范围 --><el-date-pickerv-if="item.type==='daterange'"type="daterange"v-model="myFormData[item.prop]"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":disabled="item.disabled":value-format="item.valueFormat"@change="item.change && item.change(item.prop)"></el-date-picker><!-- 开关 --><el-switchv-if="item.type==='switch'"v-model="myFormData[item.prop]":disabled="item.disabled"></el-switch><!-- slot--><template v-if="item.type==='slot'"><!-- <slot :name="item.prop" :data="item" /> --><slot :name="item.slotName?item.slotName:item.prop" :data="item" /></template> <!-- 按钮 --><span v-if="item.type==='button'" ><template v-for="btn in item.btnList"><el-button  v-if="(typeof(btn.show)=='function'?btn.show():(btn.show!=undefined?btn.show:true))":key="btn.label":disabled="typeof(btn.disabled)=='function'?btn.disabled() : btn.disabled":type="btn.type || type" :size="btn.size || size " :icon="btn.icon" plain@click="btn.handle(item)">{{btn.label}}</el-button></template></span><!--form表单 append--><template v-if="item.slot&&(item.slotType=='append'||(typeof(item.slotType)=='object'&&item.slotType.indexOf('append')!=-1))"><slot :name="(item.slotName?item.slotName:item.prop)+'-append'" :data="item" /></template></el-form-item> </template></el-form>
</template><script>
export default {name: "SearchComponent",props: {config: {type: Object,default: () => ({ labelWidth: "100px" ,ref:'formRef', inlineFlag: true, size: 'mini'})},itemList: {type: Array,default: () => []},formData: {type: Object,default: () => {}},formRules: {type: Object,default: null}},data() {return {myFormData: this.formData,myConfig:Object.assign({ labelWidth: "100px" ,ref:'formRef', inlineFlag: true, size: 'mini'},this.config),confirmLoading: false };},mounted() {},methods: {}
};
</script>
<style>
.el-form-item__label {font-weight: bold;font-size: 12px;
}
.el-form-item--mini.el-form-item {margin-bottom: 10px;
}
.el-checkbox-button__inner,
.el-radio {font-weight: normal;
}
.self-icon-upload{font-size: 26px;color:#1890ff;
}
.self-position{display: inline-block;position: absolute;top: 8px;left: 200px;
}
</style>

调用方式：

<template><search-component :itemList="searchList" :formData="searchData"></search-component>
</template>
<script>
import SearchComponent from './components/searchComponent.vue'
export default {name: 'Test',components: {SearchComponent},data(){return { searchList:[{ label: "姓名：", prop: "name", type: "input", change: this.getEvent},{ label: "省份：", prop: "adress", type: "select", options: [{label:"北京",value:"1"},{label:"上海",value:"2"}]},{ label: "时间：", prop: "date", type: "daterange",valueFormat:'yyyy-MM-dd'},{type: 'button',btnList:[{type:'primary',label:'查询',size:'mini',icon:'el-icon-search',handle:row=>this.search()},{type:'info',label:'重置',size:'mini',icon:'el-icon-setting',handle:row=>this.reset()}]}],      searchData: {name: '',//可以赋予初始值adress: '',date: ''},}},method:{getEvent(){},search(){},reset(){}}
}
</script>

vue实现查询组件的封装相关推荐

vue2.0 如何自定义组件（vue组件的封装）
一.前言之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
基于element-ui一步步封装查询组件
功能接着前一篇文章基于element-ui框架封装一个更好用的表格组件,我们开始写查询组件. 查询组件的话,需要有什么呢? 下面我画了一个粗略的原型,基本描述了查询组件需要实现的功能了. 基本的查询 ...
vue中下拉框组件的封装
原理 vue element中,需要封装一个对应的下拉款组件. 第一步:在api_domain.js中添加后台的请求接口 //获取下拉框的接口从redis中domainGetDomainKeyRed ...
基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
Vue回炉重造之封装防刷新考试倒计时组件
你好,我是Vam的金豆之路,可以叫我豆哥.2019年年度博客之星.技术领域博客专家.主要领域:前端开发.我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀 ...
vue element-ui之分页组件的封装
目录为什么要封装分页组件? 分页组件的封装如何使用? 为什么要封装分页组件? 分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载.图片分批次加载等,都 ...
vue之vue的生命周期、swiper、自定义组件的封装、自定义指令、过滤器、单文件组件及vue-cli
文章目录 1.vue的生命周期 1.1.8个生命周期函数 2.swiper 3.自定义组件的封装 4.自定义指令 4.1.定义 4.2.基本使用 4.3.利用自定义指令传入指定参数修改背景色 5.过滤 ...
Vue回炉重造之封装一个实用的人脸识别组件
你好,我是Vam的金豆之路,可以叫我豆哥.2019年年度博客之星.技术领域博客专家.主要领域:前端开发.我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀 ...

vue实现查询组件的封装

vue实现查询组件的封装相关推荐

最新文章

热门文章