如何在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