后台管理系统项目之查询页面-查询
对于后台系统的项目主要分为对数据的增删改查四大功能，本节先来讲述数据的查询页面。
数据查询页面的布局，通常包含搜索、表格、页码跳转三大部分。搜索顾名思义主要是将某些查询条件作为参数通过调用后端的查询接口获得相应的数据，一般这时会通过表格+分页的形式去展示数据。
本文章主要以elementUI组件设计开发。
<template>
<div class="app-container">
<el-form :inline="true" label-width="90px" label-right="right">
<el-form-item label="公司名称">
<el-input v-model="searchForm.name" clearable placeholder="请输入公司名称" />
</el-form-item>
<el-form-item label="活动名称">
<el-input v-model="searchForm.activityName" clearable placeholder="请输入活动名称" />
</el-form-item>
<el-form-item>
<el-button @click="reset">重置</el-button>
<el-button @click="search">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
searchForm: {
name: '',
activityName: ''
}
}
},
methods: {
// 查询
search() {},
// 重置
reset() {
this.searchForm = {
name: '',
activityName: ''
}
this.search()
}
}
}
</script>
