借助elementUI el-pagination 组件,当页面数据量大时,前端模拟假分页

965 阅读1分钟
<template>
    <el-table
      :data="dataList"
      border>
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
      </el-table>
        <div style="padding: 20px;text-align: right">
          <el-pagination
            style
            background
            :page-sizes="[5, 15, 30, 50, 100]"
            layout="sizes,total, prev, pager, next"
            :page-size="pageSize"
            :total="total"
            :current-page="currentPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
</template>
<script>
export default {
  data () {
    return {
      list: [],
      dataList: [],
      currentPage: 1, // 当前页数
      pageSize: 15, // 每页条数
      total: 0 // 总条数
    }
  },
  methods: {
    // 每页条数
    handleSizeChange (val) {
      this.pageSize = val
      this.currentPage = 1
      this.dataList = this.list.slice((this.currentPage - 1) * this.pageSize, (this.currentPage) * this.pageSize)
    },
    // 当前页数
    handleCurrentChange (val) {
      this.currentPage = val
      this.dataList = this.list.slice((this.currentPage - 1) * this.pageSize, (this.currentPage) * this.pageSize)
    },
    get_list_data () {
        this.get('/***', {}).then((response) => {
            this.list = response.result.data || []
            this.total = this.list.length
            this.handleSizeChange(15)
        })
    }
}
</script>