版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
一、准备工作
将swaggerAPI同步到easyMock 然后修改/gathering/gathering （GET方法）的内容
{
"code": 20000,
"flag": true,
"message": "@string",
"data|10": [{
"id": "@string",
"name": "@cword(8,12)",
"summary": "@cword(20,40)",
"detail": "@cword(20,40)",
"sponsor": "@string",
"image": "@image",
"starttime": "@date",
"endtime": "@date",
"address": "@county(true)",
"enrolltime": "@date",
"state": "@string",
"city": "@string"
}]
}
后端中遍历的代码的接口为/gathering，所以接口多余的/gathering要删除
二、实现代码
（1）在src/api创建gathering.js
import request from "@/utils/request"
export default {
getList(){
return request({
url:'/gathering',
method:'get'
})
}
}
（2）在table文件夹中创建gathering.vue中 ，编写脚本部分
<template>
</template>
<script>
import gatheringApi from '@/api/gathering' //导入API，赋予变量gatheringApi
import { resolve } from 'dns';
export default {
data(){
return{
list:[]
}
},
created(){
this.fetchDate(); //页面完成时自动加载fetchDate函数
},
methods:{
fetchDate(){ //自定义方法，用于获取数据
gatheringApi.getList().then(response =>{ //调用gatheringApi对象里的getList，获取响应的内容
this.list=response.data //将响应的data传给list
});
}
}
}
</script>
（3）修改gathering.vue，编写html代码部分
<template>
<el-table :data="list" border style="width: 100%">
<el-table-column prop="id" label="活动ID" width="180"></el-table-column>
<el-table-column prop="name" label="活动名称" width="180"></el-table-column>
<el-table-column prop="sponsor" label="主办方" width="180"></el-table-column>
<el-table-column prop="address" label="活动地址" width="180"></el-table-column>
<el-table-column prop="starttime" label="开始日期" width="180"></el-table-column>
<el-table-column prop="endtime" label="结束日期" width="180"></el-table-column>
</el-table>
</template>
修改router下的index.js:
注意组件的路径
table属性官方文档点我前往
三、分页组件
1.准备
修改接口/gathering/gathering/search/{page}/{size} method:POST为
/gathering/search/{page}/{size} method:POST
内容修改为：
{
"code": 20000,
"flag": true,
"message": "@string",
"data": {
"total": "@integer(100,200)",
"rows|10": [{
"id": "@string",
"name": "@cword(8,12)",
"summary": "@cword(20,40)",
"detail": "@cword(20,40)",
"sponsor": "@string",
"image": "@image",
"starttime": "@date",
"endtime": "@date",
"address": "@county(true)",
"enrolltime": "@date",
"state": "1",
"city": "@string"
}]
}
}
- 代码实现
（1）修改src/api/gathering.js，增加方法导出
},
search(page,size,searchMap) {
return request({
url: `/gathering/gathering/search/${page}/${size}`,
method: 'post',
data: searchMap
})
}
（2）修改src/views/table/gathering.vue，编写脚本部分
import gatheringApi from '@/api/gathering' //导入API，赋予变量gatheringApi
export default {
data(){
return{
list:[],
total:0,//总记录数
currentPage:1,//当前页
pageSize:10,//每页大小
searchMap: {}//查询表单绑定变量
}
},
created(){
this.fetchDate(); //页面完成时自动加载fetchDate函数
},
methods:{
fetchDate(){ //自定义方法，用于获取数据
// gatheringApi.getList().then(response =>{ //调用gatheringApi对象里的getList，获取响应的内容
// this.list=response.data //将响应的data传给list
// });
gatheringApi.search(this.currentPage,this.pageSize,this.searchMap).then(response =>{
this.list=response.data.rows
this.total=response.data.total
});
}
}
}
（3）修改src/views/table/gathering.vue，增加分页栏
<template>
<div>
<el-table :data="list" border style="width: 100%">
<el-table-column prop="id" label="活动ID" width="180"></el-table-column>
<el-table-column prop="name" label="活动名称" width="180"></el-table-column>
<el-table-column prop="sponsor" label="主办方" width="180"></el-table-column>
<el-table-column prop="address" label="活动地址" width="180"></el-table-column>
<el-table-column prop="starttime" label="开始日期" width="180"></el-table-column>
<el-table-column prop="endtime" label="结束日期" width="180"></el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination
@size-change="fetchDate"
@current-change="fetchDate"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
currentPage为当前页 ， total为总记录数
注意：
- template里面要求必须有唯一的跟节点，我们这里用div将表格和分页控件包起来。
- 由于easymock传的数据，所以选择页面显示条数时会一直显示是10条，影响不大，对接后端接口就可以了
更多属性方法事件请查看官方文档：http://element-cn.eleme.io/#/zhCN/component/pagination
四、条件查找
- 修改src/views/table/gathering.vue，增加查询表单
<!-- 查询表单 -->
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="活动名称">
<el-input v-model="searchMap.name" placeholder="活动名称"></el-input>
</el-form-item>
<el-form-item label="活动日期" >
<el-date-picker type="date" placeholder="选择开始日期" v-model="searchMap.starttime_1" ></el-date-picker>
<el-date-picker type="date" placeholder="选择截止日期" v-model="searchMap.starttime_2" ></el-date-picker>
</el-form-item>
<el-button type="primary" @click="fetchDate()">查询</el-button>
</el-form>