vue文件:
<!-- 分页 -->
<div class="block" style=position: fixed;bottom: 5px;">
<el-pagination
@size-change=handleSizeChange"
@current-change=handleCurrentChange
:current-page.sync=currentPage
:page-size="10"
layout=prev,pager,next,jumper
:total=total>
</el-pagination>
</div>
vue 定义的变量:
export default {
data() {
return {
currentPage: 1,page: 1,size: 10,total:1,watchGoodsArr: [],
}],}
},import {addedSuperviseGoods} from '@/api/searchWords' 导入 ajax请求封装方法
打开首页渲染方法：
mounted() {
addedSuperviseGoods(this.page,this.size).then(response => { # ajax请求封装方法
console.log(response.data)
if (response.code === 200) {
this.total = response.count
return this.watchGoodsArr = response.data
} else 10001this.$router.push('/login')
}
})
}
element分页规定用法：
// 分页
handleSizeChange(val) { 每页几条
},handleCurrentChange(val) { //当前页
this.page = val
this.size = 10;
addedSuperviseGoods(this.page,this.size).then(response => { # 点击请求页数返回数据渲染
this.total = response.count
this.watchGoodsArr = [];
return this.watchGoodsArr = response.data
})
},
ajax文件请求封装函数
export const addedSuperviseGoods = (page,size) => ajax(BASE_URL+'/keyword/monitored/showgoods',{page,size},'GET')
服务热线 19970861797
