elmentui分页组件的理解_element 分页 layout属性

Element ui

实现分页

 //先在表单上面绑定数据
 <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="width: 100%"
      >
1
2
3
4
5

//然后实现对分页信息的控制
<!-- 分页 -->
      <div class="fenye">
          <!-- @size-change="handleSizeChange" 绑定改变页面大小的方法
          @current-change="handleCurrentChange" 绑定当前页面方法
          :current-page="currentPage4"绑定当前页变量
          :page-sizes="pageSizes"绑定页面大小设置数组
          :page-size="pageSize"绑定页面大小变量
          layout="total, sizes, prev, pager, next, jumper"分页的功能
          :total="totalCount"绑定数据总条数 -->
        <el-pagination
          @size-change="handleSizeChange"      
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//分页的数据
currentPage: 1,   //当前显示页面
      pageSize:5,   //每页显示的数据条数
      pageSizes:[5,10,20,50,100],   //可选择每页显示的数据条数
      totalCount:1000, //数据总条数
1
2
3
4
5

//控制的方法
  //改变页面大小
    handleSizeChange(val) {
        this.pageSize = val;    //每次切换页面的大小
        this.currentPage = 1;    //改变页面大小后，跳回当前页面的第一页
      console.log(`每页 ${val} 条`);
    },
    //改变当前页
    handleCurrentChange(val) {
        this.currentPage = val;   //改变当前页
      console.log(`当前页: ${val}`);
    },
1
2
3
4
5
6
7
8
9
10
11
12

部分属性的作用

layout=“total, sizes, prev, pager, next, jumper” 就是展示组件的内容，每个字段代表展示的信息。

加箭头可以改变布局。

事件

分页组件中封装了事件，当size，page改变的时候，会触发事件，然后会发射到外部父组件的方法，外部父组件，直接在参数中引用方法，可以做一些处理，比如像后台发送请求等。

此处是方法的引用，若是写changepagesize() 加小括号，就是对方法的调用，就不能使用封装事件的回调参数了，会掉参数是默认的，在下面的方法中可以直接使用。若是调用方法，就无法接收到默认的回调参数了。

前端控制全部数据

在创建组件的时候，直接从后台把数据全部取出，交给前端控制分页。但是一般不这样使用，因为一次性查询大量数据，会造成页面卡顿。

例子：

后台与前端结合

后台也使用分页插件，实现分页功能，把分页的内容和信息传给前端，前端再利用分页组件来实现页面数据的切换。