iview+table的分页功能

iview+table的分页功能

<Table border
	: loading=" isLoading
	ref=" selection'
	: columns=" columns
	:data="tableData"
	class="myTable'
	@on- select=" selectChangeOut”
	@on-select-cance1=”selectChangeCancel"
	@on- selection- change=" onSelectCancel"
	show- header>
</Table>
<div class="pageBox" v- if=" tableData . length" >
	<Page
		: total-" parseInt( totalCount)”
		:page-size=" pageSize"
		:page -size-opts=" [10 ,20 ,30]"
		show- elevator
		show- total
		show- sizer
		@on- change=”pageChange"
		@on-page-size - change=" pageSizeChange"
	</Page>
	<p>总共{{totalPage}}页</p>
</div>

后台请求的table数据太多，将table分页

export default {
	data (){
		return{
			tabledata:[],
			totalPage:0,  //共多少页
			totalCount:0, //共多少条数据
			pageNo:1,	//当前第几页
			pageSize:10,	//每页显示多少条数据
		}
	},
	methods (){
		//页码切换刷新
		searchList: function( num){
			// console. log( num) ;
			let_ this = this;
			this. isLoading=true;
			const params = {
				ip: this . formValidate. ip,
				deve.lopCenter:this.formValidate.department,
				environment: this.formValidate.taskName ,
				subSystem: this.formValidate.childName ,
				system: this.formValidate.winName，
				administrator:this.formValidate.admName,
				pageNum: this.pageNo,
				pageSize : this.pageSize 
			},
			this.$axios.post( '/mysens/senvironment'，params )
			.then(function (response) {
				let userPermission = response.data.data
				_this. tableData = response.data.data.list;
				_this. totalCount = response.data.data.total;
				this. totalpage = response.data.data.pages;
				this . isLoading=false;
				// console.log( _this. tableData)
				let s1 = JSON. parse(window. sessionStorage .getItem('ids'))
				this . tableData. forEach(el => {
					s1. forEach( item => {
						// console. log(item, ' ttttttttttttttttttt')
						if(el.id == item ) {
							el._ Checked = true
							console . log( '1324567890000')
						}
					})
				})
			});
		},
		//切换页码
		pageChange: function(pageNo){
			let_ this = this;
			console . log("切换页码" , pageNo);
			this. pageNo = pageNo;
			_this. searchL ist(pageNo);
		},
		//切换页面大小
		pageSizeChange: function( pageSize){
			console . log("切换页面大小”,pageSize);
			console . log(this. pageNo);
			this . pageSize = pageSize;
			this . searchL ist(this . pageNo); 
		},

	}	
}

效果图片如下：