分页(element-ui)使用方式
-
第一种方式（分段数据请求回来）
-
页面布局（显示）。
<div class="awrap-content"> <el-table :data="resPage.data" style="width: 100%" max-height="90vh"> <el-table-column prop="operationTime" label="操作时间" align="center" sortable> </el-table-column> <el-table-column prop="userPhone" label="客户手机号" align="center"> </el-table-column> <el-table-column prop="operationName" label="操作名称" align="center"> </el-table-column> <el-table-column prop="operationType" label="操作类型" align="center"> </el-table-column> <el-table-column prop="requestParams" label="请求参数" align="center" show-overflow-tooltip> </el-table-column> <el-table-column prop="responseData" label="响应结果" align="center" show-overflow-tooltip> </el-table-column> </el-table> </div> -
后台根据请求的当前页数和一页的数量进行数据处理后返回给前台数据。
// 请求数据 reqPage: { pageNum: 1, pageSize: 10 }, // 响应数据 resPage: { data: [], count: "" } -
前台接受当前页数的数据和所有数据的数量。
// 请求日志数据 findAllPage(reqPage) { let self = this; self .axios({ method: "GET", url: "operation/findAllByPage", params: reqPage }) .then(function(res) { // 接口访问成功后对数据进行处理显示 if (res.code === 0) { self.resPage.count = res.data.totalCount; self.resPage.data = res.data.data; } }) .catch(); -
页面布局（操作）。
<div class="awrap-footer"> <div class="left-wrapper"> <span>共 {{Math.ceil(resPage.count/10)}} 页</span> </div> <div class="right-wrapper"> <span @click="prePage">上一页</span> <el-input-number v-model="reqPage.pageNum" @blur="numberPage" :min="1" :max="Math.ceil(resPage.count/10)" :controls="false"></el-input-number> <span @click="nextPage">下一页</span> </div> </div> -
操作事件
// 上一页 prePage() { this.reqPage.pageNum--; this.findAllPage(this.reqPage); }, // 下一页 nextPage() { this.reqPage.pageNum++; this.findAllPage(this.reqPage); }, // 输入页码 numberPage() { this.findAllPage(this.reqPage); } -
筛选页面布局
<div class="block"> <div class="filterPhone"> <el-select v-model="phoneValue" @change="filterPhonePage" @clear="clearPhone" clearable placeholder="筛选客户手机号"> <el-option v-for="item in filterPhone" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div class="filterName"> <el-select v-model="nameValue" @change="filterNamePage" @clear="clearName" clearable placeholder="筛选操作名称"> <el-option v-for="item in filterName" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div class="filterType"> <el-select v-model="typeValue" @change="filterTypePage" @clear="clearType" clearable placeholder="筛选操作类型"> <el-option v-for="item in filterType" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <span class="demonstration">操作时间</span> <el-date-picker v-model="operationDate" type="daterange" align="right" @change="datePage" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </div> -
筛选数据事件
// 筛选操作时间事件 datePage() { let isDate = this.operationDate == null || !this.operationDate[0] || !this.operationDate[1]; if (isDate) { delete this.reqPage["startTime"]; delete this.reqPage["endTime"]; this.findAllPage(this.reqPage); this.$message({ message: "请重新选择时间段", type: "warning" }); return; } let startTime = moment(this.operationDate[0]).format( "YYYY-MM-DD HH:mm:ss" ); let endTime = moment(this.operationDate[1]).format("YYYY-MM-DD HH:mm:ss"); this.reqPage["startTime"] = startTime; this.reqPage["endTime"] = endTime; this.findAllPage(this.reqPage); }, // 筛选客户手机号事件 filterPhonePage() { this.reqPage["userPhone"] = this.phoneValue; this.findAllPage(this.reqPage); }, // 筛选操作名称事件 filterNamePage() { this.reqPage["operationName"] = this.nameValue; this.findAllPage(this.reqPage); }, // 筛选操作类型事件 filterTypePage() { this.reqPage["operationType"] = this.typeValue; this.findAllPage(this.reqPage); }, // 清除筛选客户手机号事件 clearPhone() { delete this.reqPage["userPhone"]; this.findAllPage(this.reqPage); }, // 清除筛选操作名称事件 clearName() { delete this.reqPage["operationName"]; this.findAllPage(this.reqPage); }, // 清除筛选操作类型事件 clearType() { delete this.reqPage["operationType"]; this.findAllPage(this.reqPage); }
-
-
第二种方式（全部数据请求回来）
-
页面布局
<div class="table_container"> <el-table v-if="tableData.length > 0" :data="tableData" max-height="450" border style="width: 100%"> <el-table-column type="index" label="序号" width="70" align="center"> </el-table-column> <el-table-column prop="date" label="创建时间" width="250" align="center"> <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row.date }}</span> </template> </el-table-column> <el-table-column prop="type" label="收支类型" width="150" align="center"> </el-table-column> <el-table-column prop="describe" label="收支描述" width="180" align="center"> </el-table-column> <el-table-column prop="income" label="收入" width="170" align="center"> <template slot-scope="scope"> <span style="color:#00d053">+{{ scope.row.income }}</span> </template> </el-table-column> <el-table-column prop="expend" label="支出" width="170" align="center"> <template slot-scope="scope"> <span style="color:#f56767">-{{ scope.row.expend }}</span> </template> </el-table-column> <el-table-column prop="cash" label="账户现金" width="170" align="center"> <template slot-scope="scope"> <span style="color:#4db3ff">{{ scope.row.cash }}</span> </template> </el-table-column> <el-table-column prop="remark" label="备注" width="220" align="center"> </el-table-column> <el-table-column label="操作" v-if="user.identity == 'manager'" prop="operation" width="320" fixed="right" align="center"> <template slot-scope="scope"> <el-button size="small" type="warning" icon="edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="small" type="danger" icon="delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页 --> <el-row> <el-col :span="24"> <div class="pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paginations.page_index" :page-sizes="paginations.page_sizes" :page-size="paginations.page_size" :layout="paginations.layout" :total="paginations.total"> </el-pagination> </div> </el-col> </el-row> </div> -
数据定义和请求获取
tableData: [], // 最终呈现的数据 allTableData: [], // 分页过滤的数据 filterTableData: [], // 筛选过滤的数据 getProfile() { // 获取表格数据 this.$axios({ method: "GET", url: "/api/profiles" }) .then(res => { this.allTableData = res.data; this.filterTableData = res.data; // 设置分页数据 this.setPaginations(); }) .catch(err => console.log(err)); } setPaginations() { // 分页属性设置 this.paginations.total = this.allTableData.length; this.paginations.page_index = 1; this.paginations.page_size = 5; // 设置默认的分页数据 this.tableData = this.allTableData.filter((item, index) => { return index < this.paginations.page_size; }); }, handleSizeChange(page_size) { // 切换size,就是每页显示多少条事件 this.paginations.page_index = 1; this.paginations.page_size = page_size; // 设置默认的分页数据 this.tableData = this.allTableData.filter((item, index) => { return index < page_size; }); }, handleCurrentChange(page) { // 获取当前页 let index = this.paginations.page_size * (page - 1); // 数据的总数 let nums = this.paginations.page_size * page; // 容器 let tables = []; for (let i = index; i < nums; i++) { if (this.allTableData[i]) { tables.push(this.allTableData[i]); } this.tableData = tables; } }
-
-
总结
- 相比较第二种方式，第一种方式会比较容易，就是各种的操作就调用各种的接口，然后显示。第二种就是自己处理数据显示出来，如果可以我会选择第一种方式，可能要后台配合吧，第二种也可以，可以锻炼自己的逻辑能力吧。
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
