Vue2.0+ElementUI实现查询条件展开和收起功能组件

一、需求

el-form如果查询条件过多，影响页面的展示效果。
查询条件表单是我们系统中非常常见的功能，我们需要把它封装成一个通用的组件，方便在系统开发中提升开发效率。
除了在实现基本查询条件的功能上，还需要实现多条件的折叠和展开功能

二、效果图

在这里插入图片描述

三、代码示例

封装查询条件表单组件 SearchButton.vue

<template><div><el-col :span="1.5" class="elrow"><el-form-item><el-button type="primary" icon="el-icon-search" size="mini">查询</el-button></el-form-item></el-col><el-col :span="1.5" class="elrow"><el-form-item><el-button type="primary" icon="el-icon-refresh" size="mini">重置</el-button></el-form-item></el-col><el-col :span="1.5" class="elrow"><el-form-item><el-button type="text" size="mini" @click="closeSearch">{{ word }}<i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'" /></el-button></el-form-item></el-col></div>
</template><script>
export default {props: {showAll: {type: Boolean,defalut: true}},computed: {word: function() {if (this.showAll === false) {// 对文字进行处理return '展开搜索'} else {return '收起搜索'}}},mounted() {/*** 收起搜索*/this.$nextTick(function() {this.closeSearch()})},methods: {closeSearch() {//					this.showAll = !this.showAll;this.$emit('closepop')console.log('子组件的状态：' + this.showAll)}}
}
</script><style>
</style>

使用查询条件表单组件（引入组件即可）

<template><div class="app-container"><el-row :gutter="20"><el-form ref="condForm" :model="condForm" label-width="100px" :inline="true"><el-row class="btnRow"><el-col :span="6" class="elrow"><el-form-item label="线索编号1" prop="xsbh" style="padding-left: 10px;"><el-input v-model="condForm.xsbh" size="mini" clearable style="width: 160px;" /></el-form-item></el-col><el-col :span="6" class="elrow"><el-form-item label="线索类型1" prop="xslx"><el-select v-model="condForm.xslx" size="mini" style="width: 160px;"><el-optionv-for="item in xslxoptions":key="item.id":label="item.name":value="item.id"/></el-select></el-form-item></el-col><el-col :span="6" class="elrow"><el-form-item label="线索来源1" prop="xsxz"><el-select v-model="condForm.xsxz" size="mini" style="width: 160px;"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col><el-col :span="6" :class="!showAll ? 'btnRow' : 'unBtnRow'"><el-form-item label="线索编号1" prop="xsbh" style="padding-left: 10px;"><el-input v-model="condForm.xsbh" size="mini" clearable style="width: 160px;" /></el-form-item></el-col><search-button v-show="showAll" :show-all="showAll" @closepop="closepop" /></el-row><el-row :class="!showAll ? 'btnRow' : 'unBtnRow'"><el-col :span="6" class="elrow"><el-form-item label="线索编号2" prop="xsbh" style="padding-left: 10px;"><el-input v-model="condForm.xsbh" size="mini" clearable style="width: 160px;" /></el-form-item></el-col><el-col :span="6" class="elrow"><el-form-item label="线索类型2" prop="xslx"><el-select v-model="condForm.xslx" size="mini" style="width: 160px;"><el-optionv-for="item in xslxoptions":key="item.id":label="item.name":value="item.id"/></el-select></el-form-item></el-col><el-col :span="6" class="elrow"><el-form-item label="线索来源2" prop="xsxz"><el-select v-model="condForm.xsxz" size="mini" style="width: 160px;"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col><el-col :span="6" class="elrow"><el-form-item label="线索来源2" prop="xsxz"><el-select v-model="condForm.xsxz" size="mini" style="width: 160px;"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col>    <el-col :span="6" class="elrow"><el-form-item label="线索来源2" prop="xsxz"><el-select v-model="condForm.xsxz" size="mini" style="width: 160px;"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col>    <el-col :span="6" class="elrow"><el-form-item label="线索来源2" prop="xsxz"><el-select v-model="condForm.xsxz" size="mini" style="width: 160px;"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col>    <el-col :span="6" class="elrow"><el-form-item label="线索来源2" prop="xsxz"><el-select v-model="condForm.xsxz" size="mini" style="width: 160px;"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col>    <el-col :span="6" class="elrow"><el-form-item label="线索来源2" prop="xsxz"><el-select v-model="condForm.xsxz" size="mini" style="width: 160px;"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col>    <el-col :span="6" class="elrow"><el-form-item label="线索来源2" prop="xsxz"><el-select v-model="condForm.xsxz" size="mini" style="width: 160px;"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col>    <el-col :span="6" class="elrow"><el-form-item label="线索来源2" prop="xsxz"><el-select v-model="condForm.xsxz" size="mini" style="width: 160px;"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col>    <el-col :span="6" class="elrow"><el-form-item label="线索来源2" prop="xsxz"><el-select v-model="condForm.xsxz" size="mini" style="width: 160px;"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col>    <el-col :span="6" class="elrow"><el-form-item label="线索来源2" prop="xsxz"><el-select v-model="condForm.xsxz" size="mini" style="width: 160px;"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col>    <el-col :span="6" class="elrow"><el-form-item label="线索来源2" prop="xsxz"><el-select v-model="condForm.xsxz" size="mini" style="width: 160px;"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col><SearchButton v-show="!showAll" :show-all="showAll" @closepop="closepop" /></el-row></el-form></el-row><el-tableref="multipleTable":data="tableData"size="medium":header-cell-style="{background:'#f5f7fa'}":height="tableHeight"stripefithighlight-current-rowborderstyle="width: 100%;height:50px"><el-table-column type="selection" width="55" align="center" </el-table-column><el-table-column type="index" width="55" align="center" label="序号" min-width="209" /><el-table-column label="查看" width="60" align="center"><template slot-scope="scope"><el-button type="text" size="small" align="center">查看</el-button></template></el-table-column><el-table-column label="删除" width="60" align="center"><template slot-scope="scope"><el-button type="text" size="small" align="center">删除</el-button></template></el-table-column><el-table-column prop="jhbh" label="计划编号" :show-overflow-tooltip="true" align="center" /><el-table-column prop="xszt" label="状态" align="center" min-width="100" /></el-table-column></el-table><!--分页查询工具条--><el-col :span="24" class="toolbar"><el-paginationstyle="margin-right: 8px;text-align: right;":page-sizes="pageSizes":page-size="pageSize":total="totalPage":current-page.sync="pageIndex"backgroundlayout="total, sizes, prev, pager, next, jumper"/></el-col></div>
</template><script>
import SearchButton from '@/components/SearchButton/index.vue'
export default {name: 'User',dicts: ['sys_normal_disable', 'sys_user_sex'],components: {SearchButton},data() {return {showAll: true,tableData: [],// 查询条件formcondForm: {},condition: '',xslxoptions: [{id: '1',name: '土地'},{id: '2',name: '房屋'},{id: '3',name: '矿产'}],options: [{value: '1',label: '动态巡查'}, {value: '2',label: '电话举报'}, {value: '3',label: '信访举报'}, {value: '4',label: '媒体曝光'}, {value: '5',label: '其他单位转交'}, {value: '6',label: '其他'}],pageIndex: 0,pageSize: 0,pageSizes: [20, 50, 100, 200],totalPage: 0//					height: window.innerHeight - 200,}},computed: {tableHeight() {if (this.showAll) {return window.innerHeight - 140} else {return window.innerHeight - 200}}},methods: {closepop() {this.showAll = !this.showAllconsole.log('父组件的状态：' + this.showAll)}}
}
</script>
<style>.btnRow {display: block;}.unBtnRow {display: none;}
</style>