1.基础分页

<el-table v-loading="loading" :data="tableData">
    <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>
<div class="block">
    <el-pagination 
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange" 
    :current-page="selectParams.currentPage" 
    :page-sizes="[10, 20, 30, 40]" :page-size="selectParams.pageSize" 
    layout="total, sizes, prev, pager, next, jumper" 
    :total="tableData.length">
</el-pagination>
</div>

<el-table v-loading="loading" :data="tableData">
    <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>
<div class="block">
    <el-pagination 
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange" 
    :current-page="selectParams.currentPage" 
    :page-sizes="[10, 20, 30, 40]" :page-size="selectParams.pageSize" 
    layout="total, sizes, prev, pager, next, jumper" 
    :total="tableData.length">
</el-pagination>
</div>

Script

export default {
    data() {
        return {
            selectParams: {
                currentPage: 1,
                pageSize: 10,
            },
            loading: false,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }]
        }
    },
    methods: {
        getTableData() {
            this.loading = true
            setTimeout(() => {
                this.loading = false
            }, 1000)
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.selectParams.pageSize = val 
            this.getTableData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.selectParams.currentPage = val
            this.getTableData()
        }
    }
}

export default {
    data() {
        return {
            selectParams: {
                currentPage: 1,
                pageSize: 10,
            },
            loading: false,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }]
        }
    },
    methods: {
        getTableData() {
            this.loading = true
            setTimeout(() => {
                this.loading = false
            }, 1000)
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.selectParams.pageSize = val 
            this.getTableData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.selectParams.currentPage = val
            this.getTableData()
        }
    }
}