1、安装需要的包

 yarn add lodash  或
 npm i --save lodash

2、引入包

import * as _ from 'lodash';

3、html

  <el-table
          :data="detailList"
          style="width: 100%;">
</el-table>

<el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

3、javascript

//展示数据
getDetailList() {
        this.detailList = []
        this.$http({
          url: '/',
          method: 'post',
          timeout: 300000,
          data: this.searchForm,
        }).then(({res}) => {
           //获取后端传来的所有数据
            this.allDetailList = res.data
           //按默认每页数把所有数据进行划分
            this.pageLists=_.chunk(this.allDetailList, 10)
           //默认先展示第一页
            this.detailList=this.pageLists[0]
            this.totalPage = res.total
        })
    },
  // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.pageLists=_.chunk(this.allDetailList, val)
      this.detailList=this.pageLists[0]

    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.detailList=this.pageLists[val-1]
    },
Logo

前往低代码交流专区

更多推荐