el-pagination分页

<template>
  <div>
    {{currentPage1}}
    <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="1" layout=" prev, next" prev-text='上一页' next-text='下一页' :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentPage1: 1,// 页码
      total: 10
    }
  },
  methods: {
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style lang="less" scoped>
.el-pagination {
  text-align: center;
}
// 按钮颜色
/deep/.btn-prev {
  margin-right: 20px;
  background: none;
}
// 按钮颜色
/deep/.btn-next {
  margin-right: 20px;
  background: none;
}
// 按钮禁用颜色
/deep/.el-pagination button:disabled {
  background: #ccc;
  color: #fff;
}
</style>