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')