element的分页使用

直接贴代码，可直接复制

<template>
    <div>
        <div class="tableDemo">
            <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style=" 100%">    <!-- 对数据的处理，最最最重要的一句话 -->
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
             :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
            </el-pagination>
            <!--
                属性：
                page-sizes         // 这是下拉框可以选择的，每选择一页，要展示多少内容
                page-size             // 每页显示的条数
                layout="total, sizes, prev, pager, next, jumper，->"
                    prev表示上一页，next为下一页，pager表示页码列表，，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量。
                total                 // 总共有多少数据
                current-page         // 当前页数
                方法：
                size-change(每页的条数)        pageSize(每页显示的条数) 改变时会触发(每页显示的条数改变时)    (改变下拉框中的每页显示几条时触发，然后将每页显示的条数 = 改变的值)
                current-change(当前页)        currentPage(页码)改变时会触发    (点击跳转到第几页时或跳页时触发，然后将当前页 = 改变的值)
                必需的属性：
                page-size             // 每页显示的条数
                total                 // 总共有多少数据
            -->
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                currentPage: 1, //初始页
                pagesize: 5, //    每页的数据
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            };
        },
        methods: {
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange(size){
                this.pagesize = size;        //将每页显示的条数 = 改变的值
                console.log(this.pagesize) //每页下拉显示数据
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;        //然后将当前页 = 改变的值
                console.log(this.currentPage)        //点击第几页
            }
        }
    }
</script>

<style>
    .tableDemo {
         50%;
        margin: 0 auto;
    }
</style>