el-pagination使用
vue+el-pagination分页
html部分:
<ul>
<li class="item" v-for="(item,index) in pageLists" :key="index">
</ul>
<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="6" layout="total, prev, pager, next" :total="listsDataNumber" ></el-pagination>
js部分:
export default{ data(){ return{ total: '0', currentPage: 1, listsDataNumber: '', pageLists: '' } }, props: { lists: Array, }, methods: { handleCurrentChange(val) { this.pageLists = this.lists.slice((val-1)*6,val*6) }, initPageLists(){ this.pageLists = this.lists.slice(0,6) } }, watch: { "lists": function (lists) { this.listsDataNumber = lists.length this.initPageLists() }, } }
其中,lists是父页面传来的值,pageLists是分页后每一个分页里要展示的值,也就是真正要渲染的值。进入子页面时,首先initPageLists初始化第一页的值,然后通过handleCurrentChange()来更新更换分页时要展示的内容。