elementui table 分页

场景：每次写前端table分页总是感觉从头来学一遍似的，记录下直接抄

 

template部分

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-tooltip
                content="描述当前接口"
                placement="right-end"
                effect="light"
              >
                <span
                  style="{display:inline-block;font-weight: bold;color:rgb(70,130,180);}"
                >偏高接口</span>
              </el-tooltip>
            </div>
            <div class="text item">
              <el-table
                :data="highTableData"
                border
                :header-cell-style="{
                  color: 'rgb(114,143,172)',
                  'text-align': 'center'
                }"
                style="width: 100%"
              >
                <el-table-column prop="appid" label="应用名" width="180" />
                <el-table-column
                  prop="interfaceName"
                  label="接口名"
                  width="300"
                />

                <el-table-column
                  prop="peakRT"
                  label="peakrt"
                  width="180"
                  align="right"
                  :formatter="formatDecimalPoint"
                />
                <el-table-column
                  prop="pressRT"
                  label="pressrt"
                  width="180"
                  align="right"
                  :formatter="formatDecimalPoint"
                />
              </el-table>
              <el-pagination
                :current-page="highCurrentPage"
                :page-sizes="pageSizes"
                :page-size="highPageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="highTotal"
                @size-change="handleSizeChangeHigh"
                @current-change="handleCurrentChangeHigh"
              />
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

  

script代码，如果后端已经做好了分页并且将信息都返回前端

<script>
import { fetchList } from '@/api/data-compare'
export default {
  data() {
    return {
      // 表格数据
      highTableData: [],
      highArray: [],
      // 表格分页信息
      pageSizes: [10, 20, 30, 40],
      highCurrentPage: 1,
      highPageSize: 10,
      highTotal: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      var query = {}
      query.page = this.currentPage
      query.size = this.pageSize
      fetchList(query).then(response => {
        this.highTableData = response.data.content
        this.total = response.data.numberOfElements
      })
    },
    handleSizeChange(pageSize) {
      this.highPageSize = pageSize
      this.highCurrentPage = 1
      this.handleCurrentChange(this.currentPage)
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getList()
    }
  }
}
</script>

 

如果后端返回所有的数据，前端自己做分页的话

  methods: {
    getList() {
      fetchList().then(response => {
        this.highArray = response.data.content
      })
    },
    handleSizeChangeHigh(pageSize) {
      this.highPageSize = pageSize
      this.highCurrentPage = 1
      this.fetchList()
      this.handleCurrentChangeHigh(this.highCurrentPage)
    },
    handleCurrentChangeHigh(currentPage) {
      this.highCurrentPage = currentPage
      this.highTableData = this.currentChangePage(
        this.highArray,
        currentPage,
        this.highPageSize
      )
    },
    // 分页方法（重点）
    currentChangePage(list, currentPage, pageSize) {
      let from = (currentPage - 1) * pageSize
      const to = currentPage * pageSize
      this.tempList = []
      for (; from < to; from++) {
        if (list[from]) {
          this.tempList.push(list[from])
        }
      }
      return [...this.tempList]
    }
  }

实现效果：

 

 

 

参考： https://segmentfault.com/a/1190000016049838