javascript - 如何在Vue JS中使用element ui进行分页？

Question

如何使此布局=“上一个，寻呼机，下一个”工作(后端)。我需要将值放入 next_page 和 prev_page 中。我查过文档，但一无所获。

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

 <script>
data() {
return {
        per_page: null,
        current_page: null,
        total: null,
        next_page_url: null,

    }
  },
created(){
  this.fetchPost();
},
methods: {
    fetchPost() {
    axios.get('/' + this.$route.params.trans + '/adminGetPosts')
    .then(({data}) => {
        this.posts = data.data
        this.current_page= data.current_page
        this.per_page = data.per_page
        this.total = data.total
        this.next_page_url = data.next_page_url
    })
    },
 </script>

Answer 1

文档上写的很清楚。 layout="prev, pager, next"是页面布局。 示例:

new Vue().$mount('#app')

@import url("//unpkg.com/element-ui/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<div class="block">
  <span class="demonstration">页数较少时的效果</span>
  <el-pagination layout="prev, pager, next" :total="50">
  </el-pagination>
</div>
<div class="block">
  <span class="demonstration">大于 7 页时的效果</span>
  <el-pagination layout="prev, pager, next, jumper, ->, total" :total="1000">
  </el-pagination>
</div>
</div>

API:http://element.eleme.io/#/zh-CN/component/pagination