使用vue+element实现表格的分页功能，纯前端版

表格用的element官网的样式，外面的div没什么作用，可以自行删除！这个标签就是分页的标签了，也是element上的分页模板！下面的是模板代码

<template>
    <div>
        <!--<el-button style="" type="primary" @click="addRow(tableData)" icon="el-icon-plus">增加</el-button>-->
        <!-- Form -->
        <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">

            <el-form status-icon label-width="100px" class="demo-ruleForm">
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">提交</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180"
            >
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="sum"
                    label="消费金额"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="count"
                    label="消费次数">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机号码">
            </el-table-column>
            <el-table-column
                    prop="button"
                    label="操作">
                <template>
                    <el-button type="primary" icon="el-icon-scissors"></el-button>
                    <el-button type="primary" icon="el-icon-delete" @click="deleteTable(index,tableData)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                hide-on-single-page
                background
                :page-size="pageSize"
                layout="prev, pager, next"
                :current-page="pageIndex"
                :total="total">
        </el-pagination>
    </div>
</template>

下面是Script代码，

<script>
    export default {
        name: "Table",
        data() {
            return {
              // 表格所展示的数据存在这里，只要这里的数据发生改变，表格的内容就会展示对应的数据
                tableData: [{
                    id: 'c1',
                    name: '王小虎',
                    sex: '女',
                    sum: '2343',
                    count: '55',
                    phone: '15556886356'
                }],
                total: 10, // 数据的总条数
                pageIndex: 1, //当前页面显示的页码
                pageSize: 10, // 每页显示的数据条数
            
                // 这里是模态框需要的属性和模态框内需要的from元素，请忽略！
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                // 存储数据的对象，获取到的数据存储到这里，方便分页方法的使用
                tableTemp:{

                },
            }
        },
        methods: {
            deleteTable(index, rows) {// 删除当前行，页面上那个删除小图标的事件，点击后删除当前行，**注意**删除的是行不是数据，页面刷新后数据还是在的！
                rows.splice(index, 1);//删掉该行
            },
            // 当每页显示的数据条数发发生改变时（pageSize），触发此方法
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.handleCurrentChange(this.pageIndex);
            },
            // 当前页面显示的页码发生改变时（pageIndex），触发此方法
            // 用户点击页码或者上一页 下一页的按钮时，都会使pageIndex发生改变
            handleCurrentChange(pageIndex) {
                this.pageIndex = pageIndex;
                // 这里传的是temp对象，因为这个是最原始的数据，是没有改变过的
                this.currentChangePage(this.tableTemp, pageIndex);
            },
             // 分页的实现方法，data是需要分割的原始数据，pageIndex是当前页面选中的分页下标
            currentChangePage(data, pageIndex) {
                // 分页开始的下标
                let i = (pageIndex - 1) * this.pageSize;// 当前页面选中的分页下标-1 * 展示的数据的条数
                // 分页结束的下标
                let sum = pageIndex * this.pageSize;// 当前页面选中的分页下标 * 展示的数据的条数
                // 让原有的数据清空，原有的数据有一个王小虎在哪里，所以清空掉！
                this.tableData = [];
                // 这一段就是分页的核心代码，利用for循环和计算出来的下标，实现数据的分割！
                for (; i < sum; i++) {
                    this.tableData.push(data[i]);
                }

            }
        },

        // 在渲染页面前执行的函数方法，这个方法里面不能使用this
        // 这个方法是路由的守卫里面的
        beforeRouteEnter(to, from, next) {
            // 回调函数,这里的next是最后才运行的，ajax一般都写在这里面
            next(vm => { // vm在这里的指的就是this，也就是当前组件的实例
                // 进入页面后，使用ajax获取数据，然后进行展示
                vm.$ajax({
                    method: 'get',
                    url: 'data/table-data.json',
                    responseType: 'json'
                })
                // axios（也就是$.ajax）的回调函数，获得的数据都是在回调函数里面
                    .then(function (response) {
                        // 因为一进来就要实现只展示10个数据，所以不用赋值给表格的数组变量！
                        // 直接赋值给临时存储数据的变量然后调用分页的方法就好了！
                        vm.tableTemp = response.data.data;
                        vm.total = response.data.total;
                        vm.pageIndex = response.data.pageIndex;
                        vm.pageSize = response.data.pageSize;
                        // 一进来就要只加载10个数据，所以直接调用分页方法，只展示10个数据！
                        vm.currentChangePage(vm.tableTemp,vm.pageIndex);

                    })
            })
        }
    }
</script>

用到的路由守卫连接
beforeRouteEnter方法解释：在渲染该页面的element组件之前调用的方法，因为这个时候组件的实例还没有创建好，所以无法使用在方法里面使用this，而next方法为他的回调方法，（你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数）也就是在next方法里面可以使用this，也就是上面方法里面的vm！

下面的就是我的json文件里面的数据！，因为要进行分页，所以需要足够多的数据！

{
  "total":29,
  "pageIndex":1,
  "pageSize":10,
  "pages":10,
  "pageLinkCount":5,
  "data":[{
    "id":"c1","name":"小白","sex":"女","sum":"50011","count":"56","phone":"15556886356"
  },{
    "id":"c2","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c3","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c4","name":"小白","sex":"女","sum":"50018","count":"56","phone":"15556886356"
  },{
    "id":"c5","name":"小白","sex":"女","sum":"500","count":"56","phone":"15556886356"
  },{
    "id":"c6","name":"小白","sex":"女","sum":"5012","count":"56","phone":"15556886356"
  },{
    "id":"c7","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c8","name":"小白","sex":"女","sum":"500012","count":"56","phone":"15556886356"
  },{
    "id":"c9","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c10","name":"小白","sex":"女","sum":"150012","count":"56","phone":"15556886356"
  },{
    "id":"c11","name":"小白","sex":"女","sum":"550012","count":"56","phone":"15556886356"
  },{
    "id":"c12","name":"小白","sex":"女","sum":"500012","count":"56","phone":"15556886356"
  },{
    "id":"c13","name":"小白","sex":"女","sum":"505012","count":"56","phone":"15556886356"
  },{
    "id":"c14","name":"小白","sex":"女","sum":"500812","count":"56","phone":"15556886356"
  },{
    "id":"c15","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c16","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c17","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c18","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c19","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c20","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c21","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c22","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c23","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c24","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c25","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c26","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c27","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c28","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  },{
    "id":"c29","name":"小白","sex":"女","sum":"50012","count":"56","phone":"15556886356"
  }
  ]

}