传统分页和Element UI分页

以VUE文件为例

1、传统分页

<template>
  <div>
    <div class="header">
      <ul>
        <li v-for="(item,index) of newData" :key="index">{{item.jylx}}</li>
      </ul>
      <ul>
        <li v-if="currentPage === 1" class="disabled">上一页</li>
        <li v-else @click="LoadData(currentPage-1)">上一页</li>
        <li v-for="(item,index) of totalPages" :key="index" @click="LoadData(item)">{{item}}</li>
        <li v-if=" currentPage == totalPages ||  totalPages == 0" class="disabled">下一页</li>
        <li v-else @click="LoadData(currentPage+1)">下一页</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "Library",
  data () {
    return {
      currentPage: 1,
      data: [],
      newData: [],
      pageSize:10,
      total: Number
    }
  },
  methods: {
    LoadData(value) {  //设置每一页显示10条数据
      this.currentPage = value
      this.newData = this.data.slice((value-1) * this.pageSize, value *this.pageSize)
    }
  },
  computed: {
    totalPages () {
      return Math.ceil(this.total *1 / this.pageSize )
    }
  },
  beforeCreate () {
    axios.get('/static/mock/card/card.json').then( (res) =>{
      if (res) {
        res = res.data
        this.data = res.data[0]
        this.total = res.data[0].length
        this.LoadData(1)  //默认加载第一页
      }
    })
  }
}
</script>

2、ElementUI

（1）先npm install Element-ui

（2）在man.js之中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

以vue文件为例

<template>
  <div>
    <div class="header">
      <el-table :data="data.slice((currentPage-1)*pageSize, currentPage*pageSize)">
        <el-table-column label="消费类型" prop="jylx"></el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :total="total"
        layout="total, prev,pager, next,jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "Library",
  data () {
    return {
      currentPage: 1,
      data: [],
      pageSize:10,
      total: Number
    }
  },
  methods: {
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
    }
  },
  beforeCreate () {
    axios.get('/static/mock/card/card.json').then( (res) =>{
      if (res) {
        res = res.data
        this.data = res.data[0]
        this.total = res.data[0].length
      }
    })
  }
}
</script>

<style scoped>
</style>