vue项目中实现分页效果，供大家参考，具体内容如下
1.这里我们使用element-ui来实现，先使用npm安装
npm i element-ui -S
2.在main.js中全局引入
import ElementUI from "element-ui"
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI) //将element-ui挂在到全局
3.封装组件
< template >
< div class = "block" >
< el-pagination
@ current-change = "handleCurrentChange"
:current-page = "currentPage"
:page-size = "6"
layout = "prev, pager, next, jumper"
:total = "total"
:pager-count = "5"
>
</ el-pagination >
</ div >
</ template >
< script >
export default {
props: ["num", "page"], //传入的总条数，和页码
data() {
return {};
},
computed: {
currentPage: function() {
return this.page;
},
total: function() {
return this.num;
}
},
methods: {
handleSizeChange(val) {
this.$emit("size-change", val);
},
handleCurrentChange(val) {
this.$emit("current-change", val);
}
}
};
</ script >
< style >
.block {
text-align: right;
/* width: 100%; */
}
</ style >
4.引入组件并使用
< template >
< div class = "mobild" >
< div >
< ATablePaging
:num = "num"
:page = "page"
@current-change="(val) => {
page = val;
list();
}"
></ ATablePaging >
</ div >
</ div >
</ template >
< script >
import ATablePaging from "paging"; //引入分页组件
export default {
data() {
return {
page:"", //当前页码
num: 1, //内容总条数
};
},
methods: {
list() {
//发送的http请求
//后端返回的总页数等于num
},
},
mounted() {
this.news();
},
components: {
ATablePaging
}
};
</ script >
< style scoped>
</ style >
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/youngKing0615/article/details/108646438
dy("nrwz");