vue+element-ui实现分页查询

1.前端代码

table标签

[code]<el-table
height="75%"
ref="multipleTable"
:data="wfxw"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="举报人或单位名称" width="120"></el-table-column>
<el-table-column prop="city" :formatter="formatCity" label="举报事项行政区" show-overflow-tooltip></el-table-column>
<el-table-column prop="reportRelate" label="涉及项目名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="passiveDetail" label="被举报人或单位地址" show-overflow-tooltip></el-table-column>
<el-table-column prop="phone" label="联系电话" show-overflow-tooltip></el-table-column>
<el-table-column prop="wfxwStatus" :formatter="formatStatus" label="接收状态" show-overflow-tooltip></el-table-column>
<el-table-column fixed="right" label="详情" width="100">
<template slot-scope="scope">
<el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
</template>
</el-table-column>
</el-table>

2.变量

[code]data(){
return{
wfxw:[], // table中的data
currentPage: 1, // 分页
pageSize: 20, // 分页
total: 1000 // 分页

}
}

3.查询table中的数据

[code]queryTable(){
this.axios
.get("/api/zhxxzsComplaintLetterController/queryWfxw",{
params:{
currentPage: this.currentPage, //页码
pageSize: this.pageSize,//页大小
status:this.filters.status
}
})
.then(response => {
this.wfxw = response.data.zhxxzs;
this.total = response.data.total;
})
.catch(function(error) {
this.$message({ message: "获取失败" + error, type: "error" });
});
}

4.后台

[code]@RequestMapping("/queryWfxw")
public String getWfxwData(HttpServletResponse response, PageInfo pageInfo, HttpServletRequest request) throws  Exception{
SqlCondition sqlCondition = new SqlCondition();
// 查询条件
if(request.getParameter("status") != null && !request.getParameter("status").equals("")){
sqlCondition.addQueryParam("wfxw_Status", ""+request.getParameter("status"), CompareType.EQUALS);
}
sqlCondition.addQueryParam("type", "1", CompareType.EQUALS);
sqlCondition.setPageInfo(pageInfo);
// List<ZhxxzsComplaintLetter> list = ZhxxzsComplaintLetterService.getList(sqlCondition);
Map result = new HashMap();
PageList<ZhxxzsComplaintLetter> page = ZhxxzsComplaintLetterService.getPage(sqlCondition);
result.put("zhxxzs", page.getList());
result.put("total", page.getPageInfo().getTotalCount());
response.getWriter().write(JsonUtils.writeValue(result));
return null;
}

[code]public PageList<T> getPage(SqlCondition condition) {
setSchemaAndTableName(condition);
PageInfo pageInfo = condition.getPageInfo();
if (pageInfo == null) {
throw new DbInvokeException("未配置pageInfo");
}
int currentPage = pageInfo.getCurrentPage();
int pageSize = pageInfo.getPageSize();
int totalCount = count(condition);
int pageCount = (int) Math.ceil((double) totalCount / pageSize);
int starRow = (currentPage - 1) * pageSize;
int endRow = starRow + pageSize;
pageInfo.setTotalCount(totalCount);
pageInfo.setPageCount(pageCount);
pageInfo.setStartRow(starRow);
pageInfo.setEndRow(endRow);
List<Map<String, Object>> mapList = listMap(condition);
List<T> objectList = new ArrayList(mapList.size());
Class clazz = getTClass();
try {
for (Map map : mapList) {
objectList.add((T)BeanUtil.map2Bean(map, clazz));
}
} catch (Exception e) {
log.error("结果集转换失败", e);
}
PageList<T> pageList = new PageList<>();
pageList.setList(objectList);
pageList.setPageInfo(pageInfo);
return pageList;
}

分页采用的是客户端分页：查询到所有的数据加载到客户端，根据当前页以及每页数据数量进行分页。

前端所有代码：

[code]<template>
<section style="width: 95%;height: 600px">
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-select size="mini" v-model="filters.status" placeholder="请选择接收状态">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button type="primary" size="mini" icon="el-icon-search" v-on:click="queryTable">查询</el-button>
<el-button type="primary" @click="turnToPatch(1)" size="mini">转到综合执法平台</el-button>
<el-button type="primary" @click="turnToPatch(2)" size="mini">转到机关办公系统</el-button>
</el-button-group>
</el-form-item>
</el-form>
</el-col>
<!-- <ul>
<li>
<el-button type="primary" @click="turnToPatch(1)" size="mini">转到综合执法平台</el-button>
<el-button type="primary" @click="turnToPatch(2)" size="mini">转到机关办公系统</el-button>
</li>
</ul>-->
<el-table
height="75%"
ref="multipleTable"
:data="wfxw"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="举报人或单位名称" width="120"></el-table-column>
<el-table-column prop="city" :formatter="formatCity" label="举报事项行政区" show-overflow-tooltip></el-table-column>
<el-table-column prop="reportRelate" label="涉及项目名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="passiveDetail" label="被举报人或单位地址" show-overflow-tooltip></el-table-column>
<el-table-column prop="phone" label="联系电话" show-overflow-tooltip></el-table-column>
<el-table-column prop="wfxwStatus" :formatter="formatStatus" label="接收状态" show-overflow-tooltip></el-table-column>
<el-table-column fixed="right" label="详情" width="100">
<template slot-scope="scope">
<el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
</template>
</el-table-column>
</el-table>
<el-col :span="24" class="toobar">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="[5, 20, 50, 100]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</el-col>

<!--详情展示-->
<el-dialog :visible.sync="dialogFormVisible" title="详情">
<el-form :model="editForm" label-width="80px" ref="editForm">
<form>
<table class="mainTable" border="0" cellpadding="0" cellspacing="0" style="width: 98%;" align="center">
<tr>
<td class="tdClass" colspan="4" style="color:#454545;border-bottom: 0px;padding-left: 20px;font-size: 18px;font-weight:bold;" bgcolor='#EAEDF2'  align="left" >举报人信息</td>
</tr>
<tr>
<td class="tdClass leftTd"  width='20%' bgcolor='#F5F5F5'  align="center" >举报人或单位名称</td>
<td class="tdClass rightTd"  width='20%'  align="center" >{{editForm.name}}</td>
<td class="tdClass leftTd"  width='20%' bgcolor='#F5F5F5'  align="center" >身份证号码</td>
<td class="tdClass rightTd"  width='20%'  align="center" >{{editForm.idCard}}</td>
</tr>
<tr>
<td class="tdClass leftTd"  width='20%' bgcolor='#F5F5F5'  align="center" >联系电话</td>
<td class="tdClass rightTd"  width='20%'  align="center" >{{editForm.phone}}</td>
<td class="tdClass leftTd"  width='20%' bgcolor='#F5F5F5'  align="center" >联系地址</td>
<td class="tdClass rightTd"  width='20%'  align="center" >{{editForm.addressDetail}}</td>
</tr>
<tr>
<td class="tdClass leftTd"  width='20%' bgcolor='#F5F5F5'  align="center" >邮编</td>
<td class="tdClass rightTd"  width='20%'  align="center" >{{editForm.zipCode}}</td>
<td class="tdClass leftTd"  width='20%' bgcolor='#F5F5F5'  align="center" >其他联系方式</td>
<td class="tdClass rightTd"  width='20%'  align="center" >{{editForm.otherContact}}</td>
</tr>
<tr>
<td class="tdClass leftTd"  width='20%' bgcolor='#F5F5F5'  align="center" >涉及项目及名称</td>
<td class="tdClass rightTd"  width='20%'  colspan="3" align="center" >{{editForm.reportRelate}}</td>
</tr>
<tr>
<td class="tdClass" colspan="4" style="color:#454545;border-bottom: 0px;padding-left: 20px;font-size: 18px;font-weight:bold;" bgcolor='#EAEDF2'  align="left" >被举报人信息</td>
</tr>
<tr>
<td class="tdClass leftTd"  width='20%' bgcolor='#F5F5F5'  align="center" >被举报人或单位名称</td>
<td class="tdClass rightTd"  width='20%'  align="center" >{{editForm.passiveName}}</td>
<td class="tdClass leftTd"  width='20%' bgcolor='#F5F5F5'  align="center" >被举报人或单位电话</td>
<td class="tdClass rightTd"  width='20%'  align="center" >{{editForm.passivePhone}}</td>
</tr>
<tr>
<td class="tdClass leftTd"  width='20%' bgcolor='#F5F5F5'  align="center" >被举报人或单位地址</td>
<td class="tdClass rightTd"  width='20%'  colspan="3" align="center" >{{editForm.passiveDetail}}</td>
</tr>
<tr>
<td class="tdClass" colspan="4" style="color:#454545;border-bottom: 0px;padding-left: 20px;font-size: 18px;font-weight:bold;" bgcolor='#EAEDF2'  align="left" >举报内容</td>
</tr>
<tr>
<td class="tdClass leftTd"  width='20%' bgcolor='#F5F5F5'  align="center" >举报事项行政区</td>
<td class="tdClass rightTd"  width='20%'  align="center" >{{editForm.city}}</td>
<td class="tdClass leftTd"  width='20%' bgcolor='#F5F5F5'  align="center" >举报标题</td>
<td class="tdClass rightTd"  width='20%'  align="center" >{{editForm.title}}</td>
</tr>
<tr>
<td class="tdClass leftTd"  style="border-bottom: 1px solid #d6d6d6;" width='20%' bgcolor='#F5F5F5'  align="center" >举报内容</td>
<td class="tdClass rightTd"  width='20%' style="border-bottom: 1px solid #d6d6d6;" colspan="3" align="center" >{{editForm.content}}</td>
</tr>
<tr>
<td class="tdClass leftTd"  style="border-bottom: 1px solid #d6d6d6;" width='20%' bgcolor='#F5F5F5'  align="center" >附件下载</td>
<td class="tdClass rightTd"  width='20%' style="border-bottom: 1px solid #d6d6d6;" colspan="3" align="center" ><a  id="linkUrl" href="" @click="goto" class='link-type'  title="下载">{{filename}}</a></td>
</tr>
</table>
<ul>
<li>
<el-button type="primary" :disabled="buttonDisabled" @click="turnToSingle(1)" size="mini">转到综合执法平台</el-button>
<el-button type="primary" :disabled="buttonDisabled" @click="turnToSingle(2)" size="mini">转到机关办公系统</el-button>
<el-button type="primary"  @click="closeDia" size="mini">关闭</el-button>
</li>
</ul>
</form>
</el-form>
</el-dialog>
</section>
</template>

<script>
export default {
name: "WfxwTable",
data(){
return{
options: [{
value: '0',
label: '未接收'
}, {
value: '1',
label: '已举报'
}, {
value: '2',
label: '未举报'
}],
filters:{
status:""
},
wfxw:[],
dialogFormVisible:false,
editForm:[],
rows:[],
buttonDisabled:false,
currentPage: 1,
pageSize: 20,
total: 1000,
filename:""
}
},
methods:{
//查询违法行为数据
queryTable(){
this.axios
.get("/api/zhxxzsComplaintLetterController/queryWfxw",{
params:{
currentPage: this.currentPage, //页码
pageSize: this.pageSize,//页大小
status:this.filters.status
}
})
.then(response => {
this.wfxw = response.data.zhxxzs;
this.total = response.data.total;
})
.catch(function(error) {

1bb8c
this.$message({ message: "获取失败" + error, type: "error" });
});
},
formatCity(row, column){
return row.city== "130100"?"石家庄市":
row.city== "130200"?"唐山市": row.city== "130300"?"秦皇岛市":
row.city== "130400"?"邯郸市":
row.city== "130500"?"邢台市":
row.city== "130600"?"保定市":
row.city== "130700"?"张家口市":
row.city== "130800"?"承德市":
row.city== "130900"?"沧州市":row.city== "131000"?"廊坊市":row.city== "衡水市"?"石家庄市":"无";
},
formatStatus(row, column){
return row.wfxwStatus =="0"?"未接收": row.wfxwStatus =="1"?"已举报": row.wfxwStatus =="2"?"未举报":"";
},
handleDetail(row){
this.dialogFormVisible = true;
this.editForm = Object.assign({},row);
// 获取文件名
if (this.editForm.attachment ===""||this.editForm.attachment===null||this.editForm.attachment.length===0){
this.filename = "";
} else{
let filepath = this.editForm.attachment;
this.filename = filepath.substring(filepath.lastIndexOf('\\') + 1);
}
if (this.editForm.wfxwStatus!=="0"&&this.editForm.wfxwStatus !==null ) this.buttonDisabled = true;
},
closeDia(){
this.dialogFormVisible = false;
this.editForm = [];
this.buttonDisabled = false;
},
// table页面批量接收
turnToPatch(type){
let ids = new Array();
for(var i=0;i<this.rows.length;i++){
ids[i] = this.rows[i].id;
if (this.rows[i].wfxwStatus !=="0" && this.rows[i].wfxwStatus !==null){
this.$message({
message: '存在已接受数据！',
type: 'warning'
});
return;
}
}
let para = {"ids":ids,"type":type};
this.$confirm('确认上报？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.axios
.post("/api/zhxxzsComplaintLetterController/turnToPatch", para)
.then(response => {
this.$message({ message: "保存成功", type: "success" });
this.queryTable();
})
.catch(function(error) {
this.$message({ message: "保存失败", type: "success" });
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消上报！'
});
});
},
// 详情中单个接收
turnToSingle(type){
let id = this.editForm.id;
let param2 = {"id":id,"type":type};
this.$confirm('确认上报？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.axios
.post("/api/zhxxzsComplaintLetterController/turnToSingle", param2)
.then(response => {
this.$message({ message: "保存成功", type: "success" });
this.closeDia();
this.queryTable();
})
.catch(function(error) {
this.$message({ message: "保存失败", type: "success" });
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消上报！'
});
});
},
handleSelectionChange(row){
this.rows = row;
console.log(this.rows);
},
handleSizeChange(val) {
this.pageSize = val;
this.queryTable();
},
handleCurrentChange(val) {
this.currentPage = val;
this.queryTable();
},
//调用a标签下载
goto(){
if (this.filename==="") return;
let link2 = document.getElementById("linkUrl");
link2.href = "/api/zhxxzsComplaintLetterController/download?fileName="+this.filename;
link2.click();
}
},
created(){
this.queryTable();
}
}

</script>

<style scoped>
.mainTable{
height:40px;
font-size:14px;
margin-bottom: 10px;
}
.tdClass{
table-layout:fixed;
word-break:break-all;
border-color:#d6d6d6;
border-top: 1px solid #d6d6d6;
border-right: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
border-left: 1px solid #d6d6d6;
height:35px;
}
.leftTd{
color:#454545;
border-bottom: 0px;
border-right:0px;
}
.rightTd{
color:#454545;
padding-left: 10px;
border-bottom: 0px;
}
</style>