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>
分页器 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>
data(){
return{
pagesize:5,
currentPage:1
}
},
methods: {
handleCurrentChange(val){
this.currentPage = val;
}
}
上面是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)"
这段代码什么意思呢?这就又涉及到基础知识了–数组的方法,更多关于js内置对象及其方法可以参考这篇文章
首先是数组的 .slice
方法,用来截取数组,它接受收两个参数,第一个是开始的索引值,第二个是结束的索引值。截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值。
所以,当前页为第一页时 data 数据源为 从第0条到第 pageSize
条,而当currentPage
或者pageSize
发生改变时,data数据源也会跟着变化,因此就实现了分页器与表格的连接。