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>

展示的效果是这样的

<el-pagination>在这里使用的属性及event的介绍

layout属性：是个字符串类型的值，他表示都展示那些组件，以及这些组件展示的顺序，每个组件用逗号分隔，这里使用的值有total, sizes, prev, pager, next, jumper，那么这些值分别都对应什么含义呢？我用下面这个图来解释。

    写的顺序不同，会让这几个组件的排列顺序不同。

current-page属性：代表的是当前页码，支持 .sync 修饰符，是number类型的值，默认是1。

page-sizes属性：代表的是每页显示多少条数据的选项，是一个number的数组，例如[5，10，15，20]，这个属性要配合着page-size属性一起用。

page-size属性：代表的是每页显示多少条数据，支持 .sync 修饰符，是一个number类型的值，默认是10。

total属性：代表的是总条数，是number类型的值。

size-change事件：每页展示数量发生变化时触发，回调参数每页数据的条数。

current-change事件：当前页码发生变化时触发，回调参数当前页码。

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"
                               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;
                })
            }
        },
        mounted() {
            this.initDict();
        }
    }
</script>

<style scoped>
    .fla {
        float: left;
        margin-right: 15px !important;
        margin-left: 5px;
    }
</style>

注：在el-table标签中的data属性绑定的值要经过分页计算0.0

对您有帮助就点个赞呗！！