<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) //點擊第幾頁 }