手写VUE 分页功能

本文主要是介绍手写VUE 分页功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

html 部分

<table>
	<th>
		<td>ID</td><td>名称</td><td>班级</td>
	</th>
	<tr v-for="(v,i) in items">
		<td>{{v.id}}</td><td>{{v.name}}</td><td>{{v.class}}</td>
	</tr>
</table>

<!---分页-->

<nav >

	<ul>
		<!--上一页-->
		<li @click="PrePage(index)" :class="page.pageNo<=1?'disabled':''">
			<a aria-albel="Previous">
				<span aria-hidden="true">&laquo;</span>
			</a>
		</li>
		<!---当前页----->
		<li :class="page.pageNo==index?'active':''" v-for="index in pages" :key="index" @click="curPage(index)">
			<a>{{index}}</a>
		</li>
		<!----下一页----->
		<li @click="NextPage()" :class="page.pageNo>=page.pageTotal?'disabled':''">
			<a aria-label="Next">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>

</nav>

 vuejs 部分

window.onload=function(){
	new Vue({
		el:"#my",
		data:{
			lists:[],
			page:{
				pageTotal:1,
				pageNo:1,
				pageSize:10
			}
		},
		methods:{			
			getList(i=this.page.pageNo){
				this.page.pageNo=i 
				axios({
					method:'get',
					url:'http:/localhost:7000/home/page/${this.page.pageNo}/{$this.page.pageSize}'
				}).then(res=>{
					console.log(res)
					let {data,pageTotal,rows}=res.data
					this.lists=data;
					this.page.pageTotal=pageTotal
				}).catch(error=>{
					console.log(error)
				})
			}
			curPage(i){//当前页
				if(isNumber(this.getList(i);)){
					this.getList(i);
				}
			},
			PrePage(){
				if(this.page.pageNo>1){
					this.getList(--this.page.pageNo)
				}
			},
			NextPage(){
				if(this.page.pageNo<this.page.pageTotal){
					this.getList(++this.page.pageNo)
				}
			}
		},
		computed:{
			///添加省略号的位置有a左侧b两侧c右侧
			pages(){
				let {pageNo,pageTotal}=this.page;
				//1.总的页数小于10
				if(pageTotal<10) return pageTotal;
				//2.总的页数大于10,添加省略号
				//2.1总的页数小于5
				if(pageNo<=5){
					return [1,2,3,4,5,6,'...',pageTotal];
				//2.2页码大于21-5
				}else if(pageNo>pageTotal-5){
					return [1,'...',pageTotal-6,pageTotal-5,pageTotal-4,pageTotal-3,pageTotal-2,pageTotal-1,pageTotal];
				//2.3页码在5-17之间
				}else{
					return [1,'...',pageNo-3,pageNo-2,pageNo-1,pageNo,pageNo+1,pageNo+2,pageNo+3,'...'];
				}
			}
		},
		mounted(){
			this.getList(1)
		}
	})
}

这篇关于手写VUE 分页功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！