最近开发后台项目需要写一个vue的分页组件,所以把写好的组件分享到这个上面加深一下印象:
看了下写的还是比较多的最开始是父子组件之间的通讯。
父组件container里面的内容
<template>
//模板
<div>
<div class="search">
<input type="text" placeholder="请输入要搜索的内容">
</div>
<div class="content">
<div class="lists">
<ul>
<li>
<div>
<div class="displays">
<p>显示时间:</p>
<p>显示内容:</p>
</div>
<ul class="lists">
<li v-for="pages in pagedata">
<p v-text="pages.date"></p>
<p v-text="pages.message"></p>
</li>
</ul>
</div>
</li>
</ul>
<div class="page">//这里面的就是调用的pagination的组件
<pagination :total="total" @fetchDatas="fetchDatas"></pagination>
</div>
</div>
</div>
</div>
</template>
<script>
//js
import pagination from "./pagination.vue";//通过import加载组件
export default{
name: 'container',
components: {
pagination
},
data(){
return {
pagination:0, //获取的页数
current:0, //当前页数默认为0
getpage:'', //获取的接口里面的数据
pagedata:'', //获取的页数里面的数据
total:'' //获取的总条数
pageNumber:10 //每页显示多少条
}
},
munted(){
this.fetchDatas(this.current,this.pageNumber) //调用函数把页数和要显示的条数传进去
},
methods:{
fetchDatas:async function (index,pN) {
let params={
index:'index',
pagesize:'pN'
};
const res = await this.http.get(this.api.container,params)//获取接口数据
this.getpage = res.data.data //赋值
this.pagedata = this.getpage.records //拿到数据接口里自己想要显示的
this.total = this.getpage.total //拿到数据的总条数
}
}
</script>
<style>
//样式
样式就不写了,身为前端自己调试就OK了;
</style>
这是父组件里面的接口的调用,下面就是子组件里面需要把点击事件传给父组件,然后父组件通过子组件传递的值来进行一系列的操作;
子组件pagination的内容:
<templete>
//模板
<div class='page-warp'>
<ul class='pagination'>
<li :class="{'disabled':this.current < 1}">
<a href='javascript:;' @click='clickCurrent(current-1)'>
上一页
</a>
</li>
<li :class="{'disabled':this.current < 1}">
<a href="javascript:;" @click="clickCurrent(0)" >
1
</a>
</li>
<li :class="{'disabled':this.current < 1}">
···
</li>
<li v-for="page in pagination">
<a
:class="{skin:page == current+1,'disabled':page < current || page > current+2 || page == 1 || page == pagination }"
v-text="page"
href="javascript:;"
@click="clickCurrent(page-1)">
</a>
</li>
<li :class="{'disabled':this.current < 1}">
···
</li>
<li :class="{'disabled': this.current+1 == pagination}">
<a v-text="pagination" href="javascript:;" @click="clickCurrent(pagination-1)">
</a>
</li>
<li :class="{'disabled': this.current+1 == pagination}">
<a href="javascript:;" @click="clickCurrent(current+1)">
下一页
</a>
</li>
<li>
<a href="javascript:;">
共<span v-text="pagination"></span>页
</a>
</li>
</ul>
</div>
</templete>
<script>
//js
export default {
name:'pagination',
props:['total'],//父组件传过来的总条数
data(){
return {
current:0, //当前页数
pagination:'', //可以分的页数
pageNum:10, //每页显示的条数,默认为10
totals:'' //总条数
}
},
watch:{
//这里用到了watch来监听初始父组件传过来的值
total (e) {
this.totals = e;
this.pagination = Math.ceil(this.totals / this.pageNum);//拿到可以分的页数
}
},
methods:{
//点击事件获取当前页数传给父组件
clickCurrent (index) {
if( index < 0 || index > this.pagination - 1 ){
return
}else {
this.current = index;
let data = {
index : index,
pN : this.pageNum
};
this.$emit('fetchDatas',data.index,data.pN);//这里是关键点击事件里面就是依靠$emit来传值给父组件的,具体的可以参考vue的api
写到这里也基本上就完成了;
}
}
}
}
</script>
<style>
//样式
.pagination > li {
display: inline;
}
.pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:hover {
color: #777;
cursor: not-allowed;
}
.pagination > li > .skin {
color: deepskyblue;
}
.pagination > li > a, .pagination > li > span {
padding: 3px 5px;
color: #000;
}
.disabled {
display: none;
}
</style>
以上就是项目中写的分页组件,欢迎大家start,样式有点简陋大家凑合这看,相信身为前端的你一定会写出来狂拽炫酷吊炸天的好看的样式的~~~