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

来源博客：Vue+ElementUI实现查询条件展开和收起功能
代码是原博主的原封未动，想要记下来，下次使用方便找。
最终效果：
/components/SearchButton/index.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="primary" icon="el-icon-download" 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'"></i>
				</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="150px" :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-input>
						</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-option v-for="item in xslxoptions" :key="item.id" :label="item.name"
									:value="item.id">
								</el-option>
							</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-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</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-input>
						</el-form-item>
					</el-col>
					<search-button v-show="showAll" :showAll="showAll" @closepop="closepop"></search-button>
				</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-input>
						</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-option v-for="item in xslxoptions" :key="item.id" :label="item.name"
									:value="item.id">
								</el-option>
							</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-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<SearchButton v-show="!showAll" :showAll="showAll" @closepop="closepop"></SearchButton>
				</el-row>
			</el-form>
		</el-row>

		<el-table :data="tableData" size="medium" :header-cell-style="{background:'#f5f7fa'}" :height="tableHeight"
			stripe fit highlight-current-row ref="multipleTable" border style="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>
				<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>
				<el-table-column prop="xszt" label="状态" align="center" min-width="100"></el-table-column>
		</el-table>
		<!--分页查询工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination style="margin-right: 8px;text-align: right;" :page-sizes="pageSizes" :page-size="pageSize"
				:total="totalPage" :current-page.sync="pageIndex" background
				layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</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: [],
				//查询条件form
				condForm: {},
				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.showAll;
				console.log('父组件的状态：' + this.showAll)

			}
		},
	};
</script>
<style>
	.btnRow {
		display: block;
	}

	.unBtnRow {
		display: none;
	}
</style>