<el-table></el-table>的下面加上分頁控件,注意,是下面,或者叫外面,不是里面
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="sizes, prev, pager, next, jumper" :total="totalDataSize"> </el-pagination>
<script><script>里面加入
data() {
return {
input: "", // 搜索輸入框數據
jobDefinitionList: [], // 存放列表數據
selectedRows: [], //存放勾選的列表數據
jobDefinitionParameters: "",
automationType: "",
show: false,
sortBy:"job_definition_name", //排序關鍵字
sortOrder:"ASC", //排序,升序還是降序
currentPage:1, //初始頁
previousPage:0, //上一次的頁面
pageSize:10, //每頁的數據
totalDataSize:10, //總數據條數
estimateAddDataSize:10, //為了預估數據總數,猜測增加數據條數
loading: true
};
},
獲取數據的函數:
methods: {
listAllJobDefinition() {
// 由於已經導入了 Vue-resource這個包,所以 ,可以直接通過 this.$http 來發起數據請求
this.$http
.get("jobDefinitions",{
params: {
sortBy: this.sortBy,
sortOrder: this.sortOrder,
pageSize: this.pageSize,
pageNo: this.currentPage,
jobDefinitionName: this.input
}
})
.then(result => {
// 注意: 通過 $http 獲取到的數據,都在 result.body 中放着
var result = result.body;
// console.log("Code : "+result.code);
if (result.code === 0) {
// 成功了
this.loading = false;
this.jobDefinitionList = result.data;
//為了分頁功能,預估總數據條數
//如果當前頁的數據不滿每頁最大數據條數,就表示不能再繼續翻頁了
if(this.jobDefinitionList.length < this.pageSize){
this.estimateAddDataSize = 0;
}
//如果當前頁的數據大於或者等於最大數據條數,且當前頁的頁碼比上一頁大,表示還可以繼續翻頁
if(this.jobDefinitionList.length >= this.pageSize && this.currentPage > this.previousPage){
this.totalDataSize += this.estimateAddDataSize;
}
this.previousPage = this.currentPage;
for (var i in this.jobDefinitionList) {
this.automationType = this.jobDefinitionList[i]["automationType"];
this.automationType = DataMapping.automationType[this.automationType];
this.jobDefinitionList[i]["automationType"] = this.automationType;
this.jobDefinitionParameters = JSON.stringify(this.jobDefinitionList[i]["jobDefinitionParameters"]);
this.jobDefinitionList[i]["jobDefinitionParameters"] = this.jobDefinitionParameters;
}
} else {
// 失敗了
this.$message({
message: result.message,
type: 'warning'
})
}
}).catch((e) => {console.log(e)});
},
添加翻頁事件的處理
// 初始頁currentPage、初始每頁數據數pageSize和數據data
handleSizeChange: function (size) {
this.pageSize = size;
this.currentPage = 1;
this.totalDataSize = 2*(this.pageSize);
this.estimateAddDataSize = this.pageSize;
this.listAllJobDefinition();
// console.log(this.pageSize) //每頁下拉顯示數據
},
handleCurrentChange: function(currentPage){
this.currentPage = currentPage;
this.listAllJobDefinition();
// console.log(this.currentPage) //點擊第幾頁
}
