vue——element-ui中的表格和分页器连接起来

上面的代码时elementUI官方示例，简单分析一下：el-table 里面的 :data 是数据源；el-table-column 是表格里面的每一行的数据，它里面的 prop 绑定的是 :data 数据源里面的某个属性值，由此形成一个表格。

//分页器绑定到数据中
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
border
style="width:100%" >

     <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>

</el-table>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

分页器 el-pagination的代码：

<el-pagination small 
layout="total,prev,pager,next,jumper" 
:total="tableData.length"
:page-size="pagesize"
pager-count="5"
:current-page="currentPage"
@current-change="handleCurrentChange"
></el-pagination>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

data(){
    return{
        pagesize:5,
	    currentPage:1
    }
},
methods: {
	handleCurrentChange(val){
		this.currentPage = val;
				
	}
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

上面是elementUI关于分页器的最全功能的代码示例，简单分析如下：size-change事件在当前页面数据条数变化时触发；current-change事件在当前页面跳转到其它页时触发；current-page 是当前所在的页码；page-sizes 是可选的页面数据条数；page-size 是默认显示的数据条数；layout 是控制分页器的布局，里面的内容是固定的，但是可以调换位置；total 是页面总数据条数。

那么如何将table和pagination连接起来呢？

其实很简单，在实现上面代码的前提下，将el-table 表格中绑定的 data 数据源做如下修改即可：

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

  

 

  
1
 

这段代码什么意思呢？这就又涉及到基础知识了–数组的方法，更多关于js内置对象及其方法可以参考这篇文章

首先是数组的 .slice 方法，用来截取数组，它接受收两个参数，第一个是开始的索引值，第二个是结束的索引值。截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值。
所以，当前页为第一页时 data 数据源为 从第0条到第 pageSize 条，而当currentPage或者pageSize发生改变时，data数据源也会跟着变化，因此就实现了分页器与表格的连接。

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/107610652