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

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

在<el-table>中设置

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

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

            <el-pagination

                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">

            </el-pagination>

第三步:定义变量

return{

            tableData: [

                {

                    proxyName: '王小虎',

                }, {

                    proxyName: '王小',

                }

            ],// 表格数据

            // 分页

            currentPage:1,

            pagesize:10,

        }

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

        // 分页

        handleSizeChange: function (size) {

            this.pagesize = size;

        },

        handleCurrentChange: function(currentPage){

            this.currentPage = currentPage;

        },

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容