Vue+Element-UI总结_el-pagination实现Vue前端分页功能

一、前言

  当table的数据量比较大的时候。一个屏幕展示不出全部的数据，这个时候就需要分页查询来做了，因为我做的这个项目数据量比较小，所以就使用<el-pagination>做了Vue前端分页。

二、开始上代码

2.1了解 el-pagination 怎么使用
官网关于分页的介绍：https://element.eleme.cn/2.12/#/zh-CN/component/pagination
下面的就是官网的一个全部功能的例子,我做了一些整理：

<template>
    <div>
        <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
        </el-pagination>
    </div>
</template>
 
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        currentPage: 4
      };
    }
  }
</script>

2.2分页的实际应用
代码部分如下：

<template>       
    <div>
                <el-table :data="DictData.slice((dictCurrentPage-1)*dictPageSize,dictCurrentPage*dictPageSize)">
                    <el-table-column prop="dictId" label="id" width="50"></el-table-column>
                    <el-table-column prop="dictName" label="字典名称" width="120"></el-table-column>
                    <el-table-column prop="dictKey" label="字典key" width="200"></el-table-column>
                    <el-table-column prop="dictTypeKey" label="字典类型key" width="150"></el-table-column>
                </el-table>
                <el-pagination class="fy"
                			@size-change="bzjSizeChange"
                            @current-change="bzjCurrentChange"
                               layout="sizes, prev, pager, next, total"
                               :current-page.sync="dictCurrentPage"
                               :total="dictTotal"
                               background
                               :page-sizes="[5, 10, 15, 20]"
                               :page-size.sync="dictPageSize"
                >
                </el-pagination>
    </div>
</template>
<script>
    import { getRequest } from '../utils/api'
    export default {
        name: "DictManage",
        data() {
            return {
                dictTotal:0,
                dictCurrentPage:1,
                dictPageSize:5,
                DictData: [],
            }
        },
        methods: {
            initDict(){
                getRequest("/api/dict/getAll")
                    .then(rsp => {
                    //console.log(rsp.data.rtData.rows);
                    this.DictData = rsp.data.rtData.rows;
                    this.dictTotal = this.DictTypeData.length;
                })
            },
            bzjSizeChange(val) {
	            this.dictPageSize=val
	        },
	        bzjCurrentChange(val) {
	            this.dictCurrentPage=val
	        },
	        },
        mounted() {
            this.initDict();
        }
    }
</script>
 
<style scoped>
    .fla {
        float: left;
        margin-right: 15px !important;
        margin-left: 5px;
    }
</style>

注：在el-table标签中的data属性绑定的值要经过分页计算0.0
重点就是这句！！！