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

如何在Vue JS中使用元素ui进行分页？

1 个答案: