一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。
学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
表格分页
前端自己处理分页的方式，这里使用的是vue框架+element ui
重点注意表格这里处理: data="tableData.slice((currentPage-1)pagesize,currentPagepagesize)"
事件：current-change 改变时会触发，用于监听页数改变。
data这里我是直接再表格上处理了，也可以在获取表格接口数据的时候做处理也是一样的
html部分
<div>
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border size="mini" v-loading="loading">
<el-table-column align="center" label="序号" type="index" width="70px" show-overflow-tooltip></el-table-column>
<el-table-column v-for="item in tabColumn" :key="item.index" :prop="item.prop" :label="item.label" align="center" show-overflow-tooltip></el-table-column>
</el-table>
<div style="text-align:center">
<el-pagination hide-on-single-page background layout="prev, pager, next,total" :total="total" :page-size="pagesize" @current-change="current_change"></el-pagination>
</div>
</div>
data数据：
data() {
return {
loading: false,
total: 0,//总条数
pagesize:10,//指定展示多少条
currentPage:1,//当前页码
tableData: [//表格数据
{
sender: '2016-05-02',
recipient: '王小虎1',
phone: '2016-05-02',
businessModule: '2016-05-02',
Message: '王小虎',
sendTime: '2016-05-02',
triggering: '上海市普陀区金沙江路'
},{
sender: '2016-05-02',
recipient: '王小虎1',
phone: '2016-05-02',
businessModule: '2016-05-02',
Message: '王小虎',
sendTime: '2016-05-02',
triggering: '上海市普陀区金沙江路'
},{
sender: '2016-05-02',
recipient: '王小虎1',
phone: '2016-05-02',
businessModule: '2016-05-02',
Message: '王小虎',
sendTime: '2016-05-02',
triggering: '上海市普陀区金沙江路'
},{
sender: '2016-05-02',
recipient: '王小虎1',
phone: '2016-05-02',
businessModule: '2016-05-02',
Message: '王小虎',
sendTime: '2016-05-02',
triggering: '上海市普陀区金沙江路'
}],
tabColumn:[
{ prop: "sender", label: "发送人"},
{ prop: "recipient", label: "接收人"},
{ prop: "phone", label: "手机号码"},
{ prop: "businessModule", label: "业务模块"},
{ prop: "Message", label: "短信内容"},
{ prop: "sendTime", label: "发送时间"},
{ prop: "triggering", label: "触发机制"},
],
}
},
在methods里增加的方法
methods: {
current_change(currentPage){
this.currentPage = currentPage;
},
getList(){
this.loading = true;
param = {
businessModule: this.form.businessModule,
Message: this.form.Message,
sendTime: this.form.sendTime,
};
http.get('/invest/getInvestTask', param, function (res) {
this.loading = false;
this.tableData = res.data.list;
this.total=res.data.total;
});
},
}
效果图：
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
