使用element分页器进行新闻列表分页

vue使用element分页器

1、循环数组进行编辑

v-for="item in newList.slice(
              (currentpage - 1) * pagesize,
              currentpage * pagesize
            )"

2、script标签里的数据

 data() {
    return {
        newList:[
            {}//...
        ],
         //   每页数据条数
      pagesize: 5,
      currentpage: 1,
      inputpage: 1,
    };
methods: {
       // 当前每页多少条
    handleSizeChange(size) {
      this.pagesize = size;
    },
    // 当前页数
    handleCurrentChange(currentpage) {
      this.currentpage = currentpage;
    },
  },

3、分页器使用

<el-pagination
          prev-text='上一页'
          next-text='下一页'
          background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="pagesize"
            :current-page="currentpage"
            layout="  prev, pager, next"
            :total="newList.length"
          >
          </el-pagination>

当然所有的前提，你得安装element

效果图