elementui中 分页在vue中的使用

 template中：

 <el-pagination background layout="prev, pager, next" 
    :total="total"
    :page-size ="per_page"
    :current-page="currentPage"
    @current-change="current_change"
 ></el-pagination>

script中：

 data(){
        return {
            total:0,  //总条数
            currentPage:1,  //当前页
            per_page: 0, //每页几条数据
        }
    },

// 分页
current_change(currentPage){  //改变当前页
    this.currentPage = currentPage;
    this.init(this.currentPage) //请求的接口传入分页
},

 另外：改变分页的按钮颜色和大小的方法

 

>>>.el-pager li{
  width: 36px;
  height: 36px;
  line-height: 36px;
}
>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #0C9F9A!important;
  width: 36px;
  height: 36px;
  line-height: 36px;
}
/* .el-pager */
>>>.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
  height: 36px;
  min-width: 36px;
}
>>>.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
  height: 36px;
  min-width: 36px;
}