目标
- 列表功能
- 分页功能
列表功能
第一步，添加成功跳转到列表页
this.$router.push({path:'/findAllConType'})
第二步 添加路由地址定义：
{
path:'/findAllConType',
name:'FindAllConType',
component:FindAllConType
}
第三步 开发列表页
列表选择
image.png
对应的代码拷贝到 FindAllConType.vue页面里
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '张三',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>
<style></style>
分析页面组成
1、数据放到tableData里
2、tableData里的属性与页面通过prop="name"来绑定
接下来的工作至少需要两步
1）页面加载时查询后台获取列表数据
2） 页面获取响应，更新页面
-
页面
<template> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [], multipleSelection: [] } }, mounted(){ this.findAll(); }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { this.multipleSelection = val; }, findAll(){ //用axios请求后台，查询所有数据 this.$axios.get('http://localhost:8082/sys/constanttype/findAll',{params: { currentPage: 2, pageSize: 5 }}) .then(response=>{ //如果响应成功，把列表数据放到tableData里 alert(response); }) } } } </script> <style></style>
后台用pageHelper
1、pom.xml
<!-- mybatis分页插件pagehelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.10</version>
</dependency>
2、application.properties
#pagehelper\u5206\u9875\u63D2\u4EF6\u914D\u7F6E
pagehelper.helperDialect=mysql
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql
3、controller
@RequestMapping("/findAllPage")
public PageInfo add(PageParam page){
PageHelper.startPage(page.getPageNumber(), page.getPageSize());
List<ConstantType> resultList=service.findAll();
PageInfo pageInfo =new PageInfo(resultList);
return pageInfo;
}
- 后台service mapper省略
分页功能
前台完整代码：
<template>
<div>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="常数类别编码"
width="120">
<template slot-scope="scope">{{ scope.row.constantTypeCode }}</template>
</el-table-column>
<el-table-column
prop="constantTypeName"
label="常数类别名称"
width="120">
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
@current-change="changePage"
:page-size="pageSize"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
currentPage:1,
pageSize:5,
total:0,
multipleSelection: []
}
},
mounted(){
this.findAll();
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
findAll(){
//用axios请求后台，查询所有数据
this.$axios.get('http://localhost:8082/sys/constanttype/findAll',{params: {
currentPage: this.currentPage,
pageSize: this.pageSize
}})
.then(response=>{
//如果响应成功，把列表数据放到tableData里
//alert(response);
this.tableData=response.data.content;
this.total=response.data.totalElements;
})
},
changePage:function(currentPage){
//alert("下一页");
//更新当前页页码
this.currentPage=currentPage;
//再重新请求后台
this.findAll();
}
}
}
</script>
<style></style>
关键代码
参考element-ui->pagnation分页-带背景的分页
<el-pagination
background
layout="prev, pager, next"
@current-change="changePage"
:page-size="pageSize"
:pager-count="pagerCount"
:total="total">
</el-pagination>
对应的绑定事件-获取当前页并重新请求
changePage:function(currentPage){
//alert("下一页");
//更新当前页页码
this.currentPage=currentPage;
//再重新请求后台
this.findAll();
}
data部分新增加了几个属性
data() {
return {
。。。
currentPage:1,
pageSize:5,
total:0,
pagerCount:0,
。。。
}
}
axios成功的回调函数里更新数据
findAll(){
//用axios请求后台，查询所有数据
this.$axios.get('http://localhost:8082/sys/constanttype/findAll',{params: {
currentPage: this.currentPage,
pageSize: this.pageSize
}})
.then(response=>{
//如果响应成功，把列表数据放到tableData里
//alert(response);
this.tableData=response.data.content;
this.total=response.data.totalElements;
this.pagerCount=response.data.totalPages;
})
}
测试
image.png
image.png
