Vue ElementUI分页表单

功能介绍

使用前端进行table数据分页，一般用于数据较少的情况，避免多次访问接口

环境配置

需要引用axios,elementui

效果图

image.png

使用方法

需要一个vue脚手架项目，在有需要用到该组件的页面，引用该组件，并配置好相关页面的路由

组件代码

fenyetable.vue

<template>
 <div class="app">  
   <!-- 将获取到的数据进行计算 --> 
   <el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" >
     <el-table-column prop="date" label="日期" width="180"></el-table-column>
     <el-table-column prop="name" label="姓名" width="180"></el-table-column>
     <el-table-column prop="address" label="地址"></el-table-column>
   </el-table>
   <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="currentPage"
             :page-sizes="pageSizes"
             :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
             :total="totalCount">
       </el-pagination>
    </div>
</div>
</template>
<script>
import axios from 'axios'
export default {
    name: 'fenyetable',
  data(){
    return {
      // 总数据
      tableData:[],
      // 默认显示第几页
      currentPage:1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount:1,
      // 个数选择器（可修改）
      pageSizes:[1,2,3,4],
      // 默认每页显示的条数（可修改）
      PageSize:2,
    }
  },
 methods:{
    getData(){
       // 这里使用axios，使用时请提前引入
       let url = 'http://localhost:8080/mock/fenyetable.json'
       axios.get(url, {}).then(response=>{
              this.tableData=response.data.data.data
              this.totalCount = response.data.data.data.length
              })
     },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数 
      this.PageSize=val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage=1
    },
     // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage=val
    },
  },
  created:function(){
     this.getData() 
  }
}
</script>

模拟数据

fenyetable.json

{
    "code": 200,
    "msg": "查询成功",
    "data": {
        "currentPage": 1,
        "data": [
        {
            "date": "2016-05-02",
            "name": "王小虎1",
            "address": "上海市普陀区金沙江路 1518 弄"
        },
        {
            "date": "2016-05-02",
            "name": "王小虎2",
            "address": "上海市普陀区金沙江路 1518 弄"
        },
        {
            "date": "2016-05-02",
            "name": "王小虎3",
            "address": "上海市普陀区金沙江路 1518 弄"
        },
        {
            "date": "2016-05-02",
            "name": "王小虎4",
            "address": "上海市普陀区金沙江路 1518 弄"
        },
        {
            "date": "2016-05-02",
            "name": "王小虎5",
            "address": "上海市普陀区金沙江路 1518 弄"
        },{
            "date": "2016-05-02",
            "name": "王小虎6",
            "address": "上海市普陀区金沙江路 1518 弄"
        },{
            "date": "2016-05-02",
            "name": "王小虎7",
            "address": "上海市普陀区金沙江路 1518 弄"
        },{
            "date": "2016-05-02",
            "name": "王小虎8",
            "address": "上海市普陀区金沙江路 1518 弄"
        }]
    }
}