<el-table
ref="dblListTable"
//最重要的地方
:data="dataList.slice(
(currentPage - 1) * pagesize,
currentPage * pagesize
)"
@row-dblclick="dblList"
@row-click="dblistBottom"
style="width: 100%; height: 250px"
max-height="250"
border
highlight-current-row
>
<el-table-column prop="CODE1" label="部位"></el-table-column>
<el-table-column prop="PY" label="拼音"></el-table-column>
<el-table-column prop="BM" label="别名"></el-table-column>
<el-table-column prop="WBM" label="五笔码"></el-table-column>
<el-table-column prop="OWN_SET_CODE" label="自定义码"></el-table-column>
</el-table>
//分页
<el-pagination
style="float: right;padding-right: 20px"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="dataList.length">
</el-pagination>
export default {
data() {
return {
currentPage: 1, //初始页
pagesize: 100, //每页的数据
dataList:[] //所有数据
}
}
}
methods: {
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
this.pagesize = size;
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
}
}
- dataList:这是一个已经定义好的数组,它包含了所有需要显示的数据。
- currentPage:这是一个变量,通常用于跟踪当前用户正在查看的页码。例如,如果 currentPage 是 2,那么用户正在查看第二页的数据
- pagesize:这也是一个变量,它定义了每页应该显示多少条数据。例如,如果 pagesize 是 10,那么每页将显示 10 条数据
- slice() 方法:这是 JavaScript 数组的一个方法,用于提取数组的一部分浅拷贝到一个新数组对象中,并返回这个新数组。这个方法接受两个参数:起始索引(包含)和结束索引(不包含)
- (currentPage - 1) * pagesize:这个表达式计算了当前页的第一条数据的索引。因为数组索引是从 0 开始的,所以当 currentPage 是 2 时,我们需要从索引 1 * pagesize(即 pagesize)开始切片
- currentPage * pagesize:这个表达式计算了下一页的第一条数据的索引(不包括这条数据)。这实际上是当前页的最后一条数据的索引加 1
例如,如果 dataList 有 30 条数据,pagesize 是 10,currentPage 是 2,那么 dataList.slice((2 - 1) * 10, 2 * 10) 将返回包含索引 10 到 19(包含 10,不包含 20)的元素的数组,即第 11 条到第 20 条数据,这正好是第二页的数据。