Vue JSのページングに要素uiを使用するにはどうすればよいですか？

Question

このレイアウトの作成方法= "prev、pager、next"（バックエンド）。私は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