本文环境：windows7、vue2.9.6，该方法适用于所有品牌的电脑。
vue.js设置分页的方法：
1.安装依赖库（需要用到bootstrap的css样式）及分页插件（vuejs-paginate）
npm install bootstrap@3.3.0 -–save-dev npm install vuejs-paginate --save
2.封装此分页插件，根据自己需要的功能封装，调用起来会更简洁
<template>
<div class="paginate_container">
<paginate
:page-count="pageCount"
:margin-pages="marginPages"
:page-range="rangePage"
:initial-page="initPage"
:click-handler="pageEvent"
prev-text="上一页"
next-text="下一页"
:container-class="'pagination'"
:page-class="'page-item'"
:page-link-class="'page-link-item'"
:prev-class="'prev-item'"
:prev-link-class="'prev-link-item'"
:next-class="'next-item'"
:next-link-class="'next-link-item'"
></paginate>
</div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import paginate from "vuejs-paginate"
export default {
props:{
pageCount:Number,
marginPages:Number,
rangePage:Number,
initPage:Number,
},
components: { paginate },
},
methods: {
pageEvent: function(e) {
console.log(e);
this.$emit("pageEvent", e); //将值放在自定义的事件函数中作为参数
}
}
};
</script>
<style scoped>
.paginate_container {
/* widows: 100
height: 20px; */
/* display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center; */
}
.page-item {
}
.page-link-item {
}
.prev-item {
}
.prev-link-item {
}
.next-item {
}
.next-link-item {
}
</style>3.父组件中调用封装的组件
<template>
<div class="hello">
<cpaginate
:pageCount="pageCount"
:marginPages="marginPages"
:rangePage="rangePage"
:initPage="initPage"
@pageEvent="pageEvent">
</cpaginate>
</div>
</template>
<script>
import cpaginate from './customPaginate'
export default {
components:{cpaginate},
data () {
return {
pageCount:20,
marginPages:2,
rangePage:5,
initPage:0,
}
},
methods:{
pageEvent:function(e){
console.log(e)
}
}
}
</script>
<style scoped>
.demo{
}
</style>以上就是vue.js怎么设置分页的详细内容，更多请关注易知道|edz.cc其它相关文章！
