Vue中分頁 實現小記

寫這個分頁是基於layui的樣式效果展示，主要是最近在學習Vue，試着搭建CMS，但是layui和Vue其實是兩個方向東西，因此用的分頁的時候需要自己重新封裝一下· 。因此就閒的蛋疼寫了一個玩玩，自己小記一下。

樣式效果需要去layui下載包引用一下CSS 【layui官網下載地址】

例子效果，當前頁碼 6，總頁碼12 下面是點擊不同頁碼展示的效果：

單文件組件代碼：

<template>
	<view>
		<div class="layui-table-page">
			<div id="layui-table-page1">
				<div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
					<a href="javascript:;" v-if="TablePage.NowNumber == 1" class="layui-laypage-prev layui-disabled"><i class="layui-icon"></i></a>
					<a href="javascript:;" v-else class="layui-laypage-prev" @click="ChangePagin(-1, 1)"><i class="layui-icon"></i></a>
					<!-- 三頁以內容的循環，包括三頁 -->
					<a href="javascript:;" v-for="item in minShowNumber" :key="item" @click="ChangePagin(item)">
						<span v-if="item == TablePage.NowNumber" class="layui-laypage-curr">
							<em class="layui-laypage-em"></em>
							<em>{{ item }}</em>
						</span>
						<slot v-else>{{ item }}</slot>
					</a>
					<!-- 三頁以上分頁邏輯代碼 開始-->
					<slot v-if="TablePage.Totalpages > minShowNumber">
						<!-- 中間頁碼邏輯 針對 當前頁碼-2>=minShowNumber 和 當前頁碼+2<TablePage.Totalpages 開始-->
						<slot v-if="TablePage.NowNumber - 1 > minShowNumber && TablePage.NowNumber + 1 < TablePage.Totalpages - 1">
							<!-- 三頁之後第一個... -->
							<slot v-if="TablePage.NowNumber - 2 > minShowNumber"><span class="layui-laypage-spr">…</span></slot>
							<!-- 中間三個頁面添加 當前頁碼的上一頁分頁頁面、當前頁碼、當前頁碼的下一頁 -->
							<!-- 上一頁頁碼 開始 -->
							<a href="javascript:;" @click="ChangePagin(TablePage.NowNumber - 1)">{{ TablePage.NowNumber - 1 }}</a>
							<!-- 上一頁頁碼 結束 -->

							<!-- 當前頁碼 開始 -->
							<a href="javascript:;" @click="ChangePagin(TablePage.NowNumber)">
								<span class="layui-laypage-curr">
									<em class="layui-laypage-em"></em>
									<em>{{ TablePage.NowNumber }}</em>
								</span>
							</a>
							<!-- 當前頁碼 結束 -->
							<!-- 下一頁頁碼 開始 -->
							<a href="javascript:;" @click="ChangePagin(TablePage.NowNumber + 1)">{{ TablePage.NowNumber + 1 }}</a>
							<!-- 下一頁頁碼 結束-->
							<slot v-if="TablePage.NowNumber + 3 < TablePage.Totalpages"><span class="layui-laypage-spr">…</span></slot>
						</slot>
						<!-- 中間頁碼邏輯 針對 當前頁碼-2>=minShowNumber 和 當前頁碼+2<TablePage.Totalpages 結束-->
						<!-- 中間頁碼邏輯 針對 當前頁碼-2<minShowNumber 和 當前頁碼+2>TablePage.Totalpages 開始-->
						<slot v-else>
							<slot v-if="TablePage.NowNumber > minShowNumber + 1"><span class="layui-laypage-spr">…</span></slot>
							<slot v-if="TablePage.NowNumber > minShowNumber && TablePage.NowNumber < TablePage.Totalpages - 1">
								<a href="javascript:;" @click="ChangePagin(TablePage.NowNumber)">
									<span class="layui-laypage-curr">
										<em class="layui-laypage-em"></em>
										<em>{{ TablePage.NowNumber }}</em>
									</span>
								</a>
							</slot>
							<slot v-if="TablePage.NowNumber < TablePage.Totalpages - 2"><span class="layui-laypage-spr">…</span></slot>
						</slot>
						<!-- 中間頁碼邏輯 針對 當前頁碼-2<minShowNumber 和 當前頁碼+2>TablePage.Totalpages 結束-->
					</slot>
					<!-- 三頁以上分頁邏輯代碼 結束-->

					<!-- 超過三頁以上的最大頁碼 問題處理 開始 -->
					<slot v-if="TablePage.Totalpages > minShowNumber + 2">
						<!-- 上一頁頁碼 開始 -->
						<!-- <a href="javascript:;" @click="ChangePagin(TablePage.Totalpages - 1)">{{ TablePage.Totalpages - 1 }}</a> -->
						<!-- 當前頁碼 開始 -->
						<a href="javascript:;" @click="ChangePagin(TablePage.Totalpages - 1)">
							<span v-if="TablePage.Totalpages - 1 == TablePage.NowNumber" class="layui-laypage-curr">
								<em class="layui-laypage-em"></em>
								<em>{{ TablePage.Totalpages - 1 }}</em>
							</span>
							<slot v-else>{{ TablePage.Totalpages - 1 }}</slot>
						</a>
						<!-- 當前頁碼 結束 -->
						<!-- 上一頁頁碼 結束 -->

						<!-- 當前頁碼 開始 -->
						<a href="javascript:;" @click="ChangePagin(TablePage.Totalpages)">
							<span v-if="TablePage.Totalpages == TablePage.NowNumber" class="layui-laypage-curr">
								<em class="layui-laypage-em"></em>
								<em>{{ TablePage.Totalpages }}</em>
							</span>
							<slot v-else>{{ TablePage.Totalpages }}</slot>
						</a>
						<!-- 當前頁碼 結束 -->
					</slot>
					<slot v-else>
						<a href="javascript:;" @click="ChangePagin(TablePage.Totalpages)">
							<span v-if="TablePage.Totalpages == TablePage.NowNumber" class="layui-laypage-curr">
								<em class="layui-laypage-em"></em>
								<em>{{ TablePage.Totalpages }}</em>
							</span>
							<slot v-else>{{ TablePage.Totalpages }}</slot>
						</a>
					</slot>
					<!-- 超過三頁以上的最大頁碼 問題處理 結束 -->
					<a href="javascript:;" v-if="TablePage.NowNumber == TablePage.Totalpages" class="layui-laypage-next layui-disabled"><i class="layui-icon"></i></a>
					<a href="javascript:;" v-else class="layui-laypage-next" @click="ChangePagin(1, 1)"><i class="layui-icon"></i></a>
					<span class="layui-laypage-skip">
						到第
						<input type="text" min="1" v-model="JumpNumber" style="color: #000000;" class="layui-input" />
						頁
						<button type="submit" class="layui-laypage-btn" @click="ChangePagin(0,-1)">確定</button>
					</span>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
export default {
	props: {
		TbaleHeadItem: {},
		TableBodyItem: {},
		TablePage: {
			Totalpages: 0,
			NowNumber: 0,
			Total: 0
		}
	},
	created() {
		if (this.TablePage.Totalpages < this.minShowNumber) {
			this.minShowNumber = this.TablePage.Totalpages;
		}
		this.JumpNumber=this.TablePage.NowNumber;
	},
	data() {
		return {
			minShowNumber: 3,
			JumpNumber:0
		};
	},
	methods: {
		ChangePagin: function(pnumber,numbertype=0) {
			if(numbertype==1){//上一頁下一頁操作
				if (this.TablePage.NowNumber <= this.TablePage.Totalpages) {
					this.TablePage.NowNumber += pnumber;
				} else {
					this.TablePage.NowNumber = this.TablePage.Totalpages;
				}
				this.JumpNumber=this.TablePage.NowNumber;
			}
			else if(numbertype==-1)
			{
				//注意:input輸入框需要注意 默認是字符串類型，相減會轉換爲兩個數字相減，但是如果直接相加的話會優先變成字符串拼接
				//因此 impute v-modebl綁定的值需要 Number 函數轉換一下變爲數字類型
				this.TablePage.NowNumber=Number(this.JumpNumber);
			}
			else{
				//直接點擊頁碼效果
				this.TablePage.NowNumber = pnumber;
				this.JumpNumber=this.TablePage.NowNumber;
			}
			//返回當前觸發的頁碼值
			this.$emit('JumpFunc',this.TablePage.NowNumber);
		}
	}
};
</script>

<style>
.layui-table-cell {
	/* width: 60rpx; */
	font-size: 12px;
	width: 100%;
}

.layui-laypage-btn {
	margin-left: 103px;
	margin-top: -25px;
}
</style>

父頁面引用：

<!-- 引用組件 JS部分 -->
import layuitablePaging from '@/components/Table/tablePaging.vue';
export default {
	components:{
		layuitablePaging
	},
	data() {
		return {
			TablePage: {
				Totalpages: 12,
				NowNumber: 6,
				Total: 300
			}
		};
	},
	methods:{
		JumpFunc:function(pnumber)
		{
			console.log(pnumber);
		}
	}
};
<!-- 引用組件 HTML部分-->
<layuitablePaging :TablePage="TablePage" @JumpFunc="JumpFunc"></layuitablePaging>