Element-ui(el-table、el-pagination)实现表格分页

学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕 ~~，谢谢大家⭐️⭐️⭐️~

表格分页

前端自己处理分页的方式，这里使用的是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;
        });
    },
}

效果图：