(vue)iView每页显示条数和分页实现

(vue)iView每页显示条数和分页实现

效果：

//1.每页显示选取
<Select
	 class="right-item width"
	  v-model="pageSizes"
	  @on-change="pageSizeChange"
	>
	  <Option
	    v-for="item in pageSizeList"
	    :value="item.value"
	    :key="item.value"
	  >
	    {{ item.label }}
	  </Option>
	</Select>
	
//2.表格分页
<Page
   v-if="pageshow"
   :total="fileLength"
   :page-size="customSize"
   @on-change="currentPageChange"
 />

//3.初始声明
data() {
	return {
	  pageSizes: 1, //每页显示选取
      pageNum: 1, //请求页码
      pageSize: 2, //请求单页条数
      fileLength: 0, //返回总条数
      customSize: 2, //分页单页条数
	}
}


 //4.获取列表
 searchDocument() { 
   getKnowledgeComputeListByParam({ 
   	 ...
   	 pageNum: this.pageNum,
     pageSize: this.pageSize,
   }).then((res) => {
     this.fileLength = res.data.data.total;
     this.tableData = res.data.data.list;
     this.tableData.forEach((item, index) => {
       item.key = index + 1; //序号生成
     });
   }); 
 },

//5.每页显示选取
pageSizeChange(val) {
  this.pageSize = val; //请求单页条数
  this.searchDocument();
  this.customSize = val; //分页单页条数
},
//6.点击分页
currentPageChange(val) {
  this.pageNum = val; //请求的页码
  this.searchDocument();
},