vue+iview实现table和分页及与后台数据交互

最近在项目中遇到使用table分页的功能，所以分享出来给大家希望能够对大家有帮助，话不多说直接上代码

<template>
    <div>
      <Table :columns="historyColumns" :data="historyData"></Table>
      <Page :total="dataCount" :page-size="pageSize" show-total class="paging" @on-change="changepage" @on-page-size-change="pages" show-sizer show-elevator show-total></Page>
    </div>
</template>
<style scoped>
    .paging {
        float: left;
        margin-top: 10px;
    }
</style>
<script>
    import Cookies from 'js-cookie';

    export default {
        data() {
            return {
                ajaxHistoryData: [],
                // 初始化信息总条数
                dataCount: 0,
                // 每页显示多少条
                pageSize: 10,
                xia: 0, //下一页或者上一页的第一项索引值
                historyColumns: [{
                    "type": "selection",
                    "align": "center",
                    "width": "30",
                    "className": "border-r"
                }, {
                    "title": "用户名",
                    "align": "center",
                    "key": "username"
                }, {
                    "title": "姓名",
                    "align": "center",
                    "key": "name"
                }, {
                    "title": "所属组织机构",
                    "align": "center",
                    "key": "deptName"
                }, {
                    "title": "状态",
                    "align": "center",
                    "key": "status"
                }, {
                    "title": "联系电话",
                    "align": "center",
                    "key": "mobile"

                }, {
                    'title': '操作',
                    'align': 'center',
                    'key': 'action',
                    render: (h, params) => {
                        return h('div', [
                            h('Icon', {
                                props: {
                                    type: 'ios-baseball',
                                    size: 16
                                },
                                style: {
                                    marginLeft: '20px'
                                }


                            })

                        ])

                    }
                }],
                historyData: []
            }
        },
        methods: {
            // 获取历史记录信息
            handleListApproveHistory() {
                let sessionId = Cookies.get('status');
                let this1 = this;
                this.$http({
                        headers: {
                            "Authorization": sessionId,
                        },
                        method: 'post',
                        url: this1.GLOBAL.BASE_URL + '/sys/user/list',
                        params: {
                            'deptId': '001',
                            'offset': 0, //第一页第一项的索引
                            'limit': 10, //每页显示的条数
                        },
                    })
                    .then(function(res) {
                        debugger
                        this1.ajaxHistoryData = res.data.data;
                        this1.dataCount = res.data.total;

                        this1.historyData = this1.ajaxHistoryData;
                    })
                    .catch(function(error) {
                        //
                    })

            },
            pages(num) { //修改每页显示条数时调用
                debugger
                this.pageSize = num;
                this.changepage(1);
            },
            changepage(index) {
                //index当前页码
                this.xia = (index - 1) * this.pageSize;


                let sessionId = Cookies.get('status');
                let this1 = this;
                this.$http({
                        headers: {
                            "Authorization": sessionId,
                        },
                        method: 'post',
                        url: this1.GLOBAL.BASE_URL + '/sys/user/list',
                        params: {
                            'deptId': '001',
                            'offset': this1.xia,
                            'limit': this1.pageSize,
                        },
                    })
                    .then(function(res) {
                        debugger
                        this1.historyData = res.data.data;
                    })
                    .catch(function(error) {
                        //
                    })
            }
        },
        created() {
            this.handleListApproveHistory();
        }
    }
</script>

代码中一些重要的部分都有标记了注释，如果还有不懂得地方大家可以留言

下面是我的公众号，欢迎大家关注，可以一起学习一起进步：