前端后台管理会存在很多表格,表格数据过多就需要分页,前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索。
效果
一、查询条件
代码如下(示例):
<div style="margin-left: 20px">
<el-form :inline="true" :model="formQuery" class="demo-form-inline">
<el-form-item label style="margin-right: 10px">
<el-input placeholder="航线名称" clearable prefix-icon="el-icon-search"
v-model="formQuery.routeName">
</el-input>
</el-form-item>
<el-form-item label style="margin-right: 10px">
<el-select v-model="formQuery.deptId" filterable clearable placeholder="选择部门">
<el-option v-for="item in departmentList" :key="item.deptId"
:label="item.name" :value="item.deptId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label style="margin-right: 10px">
<el-select v-model="formQuery.routeType" filterable clearable
placeholder="航线分类">
<el-option v-for="item in routeTypeList" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item class="overall" style="margin-right: 10px">
<el-button type="primary" icon="el-icon-search" @click="queryBtn">查询</el-button>
</el-form-item>
</el-form>
</div>
二、页面展示
(1)分页展示
<!-- 分页区域 -->
<div class="pages">
<el-pagination background @current-change="handleCurrentChange"
@size-change="handleSizeChange":current-page.sync="current" :page-size="pageSize"
:page-sizes="[5, 10, 15, 30]"
layout="total, sizes,prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
@size-change的属性:绑定当前页数量的事件,当前页数量变化时,触发SizeChange方法@current-change的属性:改变当前页时会触发事件
:current-page 的属性:绑定当前第几页
:page-size 的属性:绑定当前有几条数据
:total=“total” 这个是绑定一个变量保存数量总数
(2)表格数据
<el-table ref="multipleTable" :data="tableData" border height="700"
@selection-change="handleSelectionChange" v-loading="loading" element-loading-text="正在加
载中" style="overflow-y: auto">
<el-table-column type="selection" width="80"></el-table-column>
<el-table-column type="index" label="序号" width="100" :index="indexMethod">
</el-table-column>
<el-table-column prop="routeInfo.routeName" label="航线名称"></el-table-column>
<el-table-column prop="routeInfo.routeType" label="航线类型">
<template slot-scope="scope">
{{ scope.row.routeInfo.routeType ? "精细化" : "通道巡检" }}
</template>
</el-table-column>
<el-table-column prop="routeInfo.deptName" label="部门"></el-table-column>
<el-table-column prop="routeInfo.createTime" label="创建时间"></el-table-column>
</el-table>
(3)绑定以上的变量:
export default {
data() {
return {
formQuery: {
routeName: "",
deptId: "",
routeType: "",
},
tableData: [],
current: 1, // 当前页码
total: 0,
pageSize: 10, // 每页显示多少条
isClickSearch: false, // 当点击搜索时 对底部分页进行判断
}
}
}
(4)此处是条件查询的数据:
// 表格查询
queryBtn() {
this.isClickSearch = true; // 当点击搜索时 对底部分页进行判断
const formQuery = this.formQuery;
if (!formQuery.routeName) delete formQuery.routeName;
if (!formQuery.deptId) delete formQuery.deptId;
if (formQuery.routeType === 0 || formQuery.routeType === 1) {
formQuery.routeType = parseInt(formQuery.routeType);
} else {
delete formQuery.routeType;
}
this.current = 1;
this.getRouteBySearch(this.current, this.pageSize, this.formQuery);
},
(5)此处是分页的绑定事件的处理:(此处省略表格数据的对接)
//改变多少条
handleSizeChange(pageIndex) {
this.current = 1;
this.pageSize = pageIndex;
if (this.isClickSearch) {
this.getRouteBySearch(this.current, this.pageSize, this.formQuery);//此处走查询接口
} else {
this.getList(this.current, this.pageSize);//此处走表格初始化的接口
}
},
// 底部分页功能
handleCurrentChange(pageIndex) {
this.current = pageIndex;
if (this.isClickSearch) {
this.getRouteBySearch(this.current, this.pageSize, this.formQuery);//此处走查询接口
} else {
this.getList(pageIndex, this.pageSize);//此处走表格初始化的接口
}
},
总结
大家有什么疑问,可以留言哈。
感谢大家的观看~