在components文件夾中新建分頁組件Pagination.vue,代碼如下
<template>
<el-row>
<div class="number">
<div>
總共
<span>{{currtotal}}</span> 條記錄,每頁顯示
<span>{{currpageSize}}</span> 條
</div>
</div>
<div class="pag-wrap">
<el-pagination background class="pag" @current-change="pageChange" layout="prev, pager, next" :page-size="currpageSize" :total="currtotal"></el-pagination>
</div>
</el-row>
</template>
<script>
export default {
data() {
return {
currpageIndex: 1, //當前頁數
currpageSize: this.pagesize, //每頁顯示條數
currservicePage: this.options.servicePage, //是否服務端分頁
currtotal: 0, //總條數
pagingResult: [], //分頁結果
serviceData: [] //服務器請求的數據,用於前端分頁,需要首次獲取所有服務端數據,進行前端js分頁
};
},
props: {
pagesize: {
type: Number,
default: 10
},
options: {
type: Object
}
},
created() {
if (!this.currservicePage) {
this.frontPaging();
}
else {
this.serach();
}
},
methods: {
//分頁控件分頁事件
pageChange(val) {
if (val) {
this.currpageIndex = val;
}
if (!this.currservicePage) {
this.pagingResult = this.jsPagination(
this.currpageIndex,
this.currpageSize,
this.serviceData
);
this.$emit("getPagingResult", this.pagingResult); //子組件像父組件傳值
} else {
this.serach();
}
},
//父組件點擊“查詢按鈕”調用的事件
serach(i) {
if (i) {
this.currpageIndex = 1;
}
if(this.currservicePage){
this.$axios.get(`${this.options.url}&pageIndex=${this.currpageIndex}&PageSize=${this.currpageSize}`).then(res =>
{
this.pagingResult = res.data;
this.currtotal = res.total;
this.$emit("getPagingResult", this.pagingResult); //子組件像父組件傳值
});
}else{
this.frontPaging();
}
},
//js分頁時,首次獲取服務器端所有數據
frontPaging() {
this.$axios.get(this.options.url).then(res => {
this.serviceData = res;
this.currtotal = this.serviceData.length;
this.pageChange(); //調用分頁事件
});
},
//前端js分頁方法
jsPagination(pageNo, pageSize, array) {
var offset = (pageNo - 1) * pageSize;
return offset + pageSize >= array.length? array.slice(offset, array.length): array.slice(offset, offset + pageSize);
}
}
};
</script>
其他界面調用分頁方法,如下:
> 將分頁組件放在table下面
<el-input v-model="this.options.serachText" placeholder=""></el-input>
<el-button type="primary" @click="serach()">查詢</el-button>
<el-table ref="singleTable" :data="tableData">......</el-table>
<Pagination :options="options" @getPagingResult="getPagingResult"></Pagination>
<script>
import Pagination from "../../components/Pagination";
export default {
data() {
return {
options: {
serachText: ""
servicePage: false, //是否爲服務器端分頁
url: `/api/User/GetRoleInfoByProjectID?projectId=${localStorage.eleProjectId}` //查詢數據源路徑,條件可直接跟在後面
},
tableData: [],
}
},
components: {
Pagination
},
methods: {
getPagingResult(result) { //獲取子組件向父組件傳遞的值
this.tableData= result;
this.$refs.singleTable.setCurrentRow(this.tableData[0]); //默認選中第一行
},
serach() {
//調用pagination組件中的serach方法
this.options.url = `/api/User/GetRoleInfoByProjectID?serachText=${this.options.serachText}`
this.$refs.pagination.serach(1); //傳入1,指的是顯示第一頁
},
}
}
</script>