vue + element-ui 实现分页功能_elementui分页功能

第一步：

引入element-ui的分页器
1

      <el-pagination
          background
          //此事件监听的是分页器被点击事件
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          //page-size的意思是你打算一页显示多少行数据，我这里就是一页显示10行
          :page-size="10"
          //total就是你一共会有多少条数据，这个一般是后端返回来的数据决定的
          :total="total">
      </el-pagination>
1
2
3
4
5
6
7
8
9
10

element-ui的分页器会根据你要显示多少行数据和总共有的数据做一个计算来显示当前页数，也就是说：如果总数据是50条，你一页显示10条，那么分页器就会自动显示只有5页数据。

第二步：

将所有的数据切分
是的，本分页功能的原理是将所有的数据一次性请求回来，然后再进行切分显示（如果数据庞大就显然不能这么做）
如何切分呢？

//此事件可以拿到一个参数，就是当前点击的页数，如果点击第二页，currentindex就是2
 handleCurrentChange(currentindex){
//contentdata是所有的数据，是一个大数组。使用.slice()方法可以将大数组切分
//.slice()方法接受两个参数，开始和结束的值
//这样得到的currentdata就是固定只有10个值的数组了，就可以用v-for展示啦
      this.currentdata = this.contentdata.slice((currentindex-1)*10, currentindex*10)
      console.log(currentindex);
    }
1
2
3
4
5
6
7
8

第三步：

因为currentdata是通过handleCurrentChange函数赋值的，所以在没有点击选择页面时是没有值的，我选择在created里先赋值10条数据给currentdata

  created() {
    this.currentdata = this.contentdata.slice(0, 10)
  }
1
2
3