Vue+Element前端分页

背景

• 有些页面显示数据量不大，或者后端分页比较复杂；不考虑性能情况下前端分页不失为比较好的选择。

实现

• 技术点：VUE + Element (el-table , el-pagination)

DEMO

<template>
  <div class="app-container">
    <div class="content">
      <el-table
        v-loading="tableLoading"
        :data = "supplierData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        element-loading-text="拼命加载中"
      >
        <el-table-column prop="supplierId" label="Id" sortable />
        <el-table-column prop="supplierName" label="名称" sortable />
      </el-table>
      <div style="display: flex; justify-content: flex-end;">
        <el-pagination :current-page="currentPage" :page-sizes="[15,50,100,300]" :page-size="pageSize" :total="supplierData.length" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'Suppliers',
  data() {
    return {
      tableLoading: false,
      supplierData: [],
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 15 // 每页的数据条数
    }
  },
  created() {
    this.search()
  },
  methods: {
    search() {
      this.tableLoading = true
      getSupplier(this.filter).then((resp) => {
        this.tableLoading = false
        if (resp.result) {
          this.supplierData = resp.data
          this.total = resp.data.length
        }
      })
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>