在vue中对element-ui表格添加分页功能

第一步：根据每页要显示的条数来设置，关联分页代码的分页条件

在中设置

 :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"

第二步：在表格后面添加上分页代码

           

                class="center"

                @size-change="handleSizeChange"

                @current-change="handleCurrentChange"

                :current-page="currentPage"

                :page-sizes="[10, 20, 50, 100]"

                :page-size="pagesize"

                layout="total, sizes, prev, pager, next, jumper"

                :total="tableData.length">

           

第三步：定义变量

return{

            tableData: [

                {

                    proxyName: '王小虎',

                }, {

                    proxyName: '王小',

                }

            ],// 表格数据

            // 分页

            currentPage:1,

            pagesize:10,

        }

第四步：在methods中创建分页方法事件

        // 分页

        handleSizeChange: function (size) {

            this.pagesize = size;

        },

        handleCurrentChange: function(currentPage){

            this.currentPage = currentPage;

        },