1、引入分页组件:

<el-pagination

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

        :total="list.length"

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

        :current-page="currentPage"

      />

2、data中初始化变量:

currentPage: 1, //默认页码为1

pagesize: 10, //默认一页显示10条

3、修改表格绑定的数据

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

4、methods中添加换页方法

handleSizeChange: function (size) {

      //一页显示多少条

      this.pagesize = size;

    },

    handleCurrentChange: function (currentPage) {

      //页码更改方法

      this.currentPage = currentPage;

    }

           

         

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐