1.安装

npm install element-ui -S

2.在main.js中引入,这里是全部引入，也可以按需引入

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

3.使用

layout="prev, pager, next, jumper" ：jumper直接前往多少页
background：带背景

<div class="page-wrapper">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="pagination.current"
      :page-size="pagination.size"
      layout="prev, pager, next, jumper" 
      next-text="下一页"
      prev-text="上一页"
      background
      :total="pagination.total">
    </el-pagination>
  </div>

js:

data() {
    return {
      pagination: {
        current: 1,
        total: 300,//接口获取
        size: 10//每页显示多少条数据
      }
    }
  },
  methods:{
    /*翻页*/
    handleCurrentChange(page) {
      this.pagination.current = page
      // this.getData()//获取数据
    }
  }

css：修改默认样式

<style  lang="less" scoped>
.page-wrapper {
    /*不可点击的*/
    /deep/ .el-pagination.is-background .btn-prev:disabled,.page-wrapper .el-pagination.is-background .btn-next:disabled {
      background-color: #dddddd;
      color: #f9fafa;
      border: 0;
      cursor: not-allowed;
    }
    /deep/ .el-pagination button,.page-wrapper .el-pagination span:not([class*=suffix]){
      min-width: 56px;
    }
    /*上下页可点击的样式*/
    /deep/ .el-pagination.is-background .btn-next,.page-wrapper .el-pagination.is-background .btn-prev,.page-wrapper .el-pagination.is-background .el-pager li  {
      background-color: #fff;
      color: #333;
      border: solid 1px #dcdcdc;
      margin: 0 3px;
    }
    /*上下页hover效果*/
    /deep/ .el-pagination.is-background .btn-next:hover,.page-wrapper .el-pagination.is-background .btn-prev:hover {
      border-color: #e5242b;
    }
    /*页码样式*/
    /deep/ .el-pagination {
      color: #333333;
      font-weight: normal;
    }
    /*当前页样式*/
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #e5242b;
      color: #fff;
      border:0;
    }
    /*当前页hover样式*/
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
      color: #fff;
      border:0;
    }
    /*不是当前页其他页码hover样式*/
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
      color: #333;
      border-color: #e5242b;
    }
  }
</style>