vue,element-ui,el-table,分页,后端一次性传回全部数据,前端分页功能

<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;
    }
}
  1. dataList:这是一个已经定义好的数组,它包含了所有需要显示的数据。
  2. currentPage:这是一个变量,通常用于跟踪当前用户正在查看的页码。例如,如果 currentPage 是 2,那么用户正在查看第二页的数据
  3. pagesize:这也是一个变量,它定义了每页应该显示多少条数据。例如,如果 pagesize 是 10,那么每页将显示 10 条数据
  4. slice() 方法:这是 JavaScript 数组的一个方法,用于提取数组的一部分浅拷贝到一个新数组对象中,并返回这个新数组。这个方法接受两个参数:起始索引(包含)和结束索引(不包含)
  5. (currentPage - 1) * pagesize:这个表达式计算了当前页的第一条数据的索引。因为数组索引是从 0 开始的,所以当 currentPage 是 2 时,我们需要从索引 1 * pagesize(即 pagesize)开始切片
  6. currentPage * pagesize:这个表达式计算了下一页的第一条数据的索引(不包括这条数据)。这实际上是当前页的最后一条数据的索引加 1

例如,如果 dataList 有 30 条数据,pagesize 是 10,currentPage 是 2,那么 dataList.slice((2 - 1) * 10, 2 * 10) 将返回包含索引 10 到 19(包含 10,不包含 20)的元素的数组,即第 11 条到第 20 条数据,这正好是第二页的数据。

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值