Question

vue 分页组件怎么控制每页的显示

Answer 1

Pagination.vue
<!--
params:
pageNo: 总页数
current: 当前的页码
-->
<template>
<div class="pager">
<button class="btn btn-pager" :disabled="this.current == 1" @click="prePage">上一页</button>
<span v-if="pageNo !== 1" class="page-index {{ 1 == current ? 'active':''}}" @click="goPage(1)">1</span>
<span v-if="preClipped" class="page-index">...</span>
<span v-for="index in pages" class="page-index {{ index == current ? 'active':''}} " @click="goPage(index)">{{index}}</span>
<span v-if="backClipped" class="page-index">...</span>
<span class="page-index {{ pageNo == current ? 'active':''}} " @click="goPage(pageNo)">{{pageNo}}</span>
<button class="btn btn-pager" :disabled="this.current == pageNo" @click="nextPage">下一页</button>
</div>
</template>

Answer 2

Pagination.vue
<!--
params:
pageNo: 总页数
current: 当前的页码
-->
<template>
<div class="pager">
<button class="btn btn-pager" :disabled="this.current == 1" @click="prePage">上一页</button>
<span v-if="pageNo !== 1" class="page-index {{ 1 == current ? 'active':''}}" @click="goPage(1)">1</span>
<span v-if="preClipped" class="page-index">...</span>
<span v-for="index in pages" class="page-index {{ index == current ? 'active':''}} " @click="goPage(index)">{{index}}</span>
<span v-if="backClipped" class="page-index">...</span>
<span class="page-index {{ pageNo == current ? 'active':''}} " @click="goPage(pageNo)">{{pageNo}}</span>
<button class="btn btn-pager" :disabled="this.current == pageNo" @click="nextPage">下一页</button>
</div>
</template>

Answer 3

其中vuetable组件负责数据展示功能，里面内容暂且不表，pages组件实现分页功能，如下： 《 {{currentIndex+$index}} class为pageindex的 li 的点击事件里面将 要显示的index 传给 props传递过来的 clickhandle, clickhandle会根据index

Answer 4

其中vuetable组件负责数据展示功能，里面内容暂且不表，pages组件实现分页功能，如下： 《 {{currentIndex+$index}} class为pageindex的 li 的点击事件里面将 要显示的index 传给 props传递过来的 clickhandle, clickhandle会根据index

Answer 5

你想要怎么样控制