vue項(xiàng)目中實(shí)現(xiàn)分頁效果，供大家參考，具體內(nèi)容如下

1.這里我們使用element-ui來實(shí)現(xiàn)，先使用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'], //傳入的總條數(shù)，和頁碼 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:'', //當(dāng)前頁碼 num: 1, //內(nèi)容總條數(shù) }; }, methods: { list() { //發(fā)送的http請求 //后端返回的總頁數(shù)等于num }, }, mounted() { this.news(); }, components: { ATablePaging }};</script><style scoped></style>

關(guān)于vue.js的學(xué)習(xí)教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。