Vue后台管理系统之实现分页功能,【原理+实战+视频+源码

34 阅读2分钟

:total="total"

1.2 逻辑

data() {

return {

//请求参数

queryInfo: {

type: 3,

//当前页数

pagenum: 1,

//指定当前页数显示的数目

pagesize: 5,

},

goodsList: [],

//总数据

total: 0,

}

}

methods: {

//获取商品分类数据

async getGoodsCate() {

const { data: res } = await this.$http.get("categories", {

params: this.queryInfo,

})

if (res.meta.status !== 200) {

this.$message.error("获取参数失败")

}

this.total = res.data.total

this.goodsList = res.data.result

//console.log(this.goodsList)

},

//监听每页的条数

handleSizeChange(pagesize) {

// console.log(每页 ${val} 条)

this.queryInfo.pagesize = pagesize

this.getGoodsCate()

},

//监听当前页数

handleCurrentChange(pageNum) {

this.queryInfo.pagenum = pageNum

this.getGoodsCate()

},

},

1.3 参数说明

 1.4 效果演示

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」,内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道

HTML

  • HTML5有哪些新特性?

  • Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?

  • 如何实现浏览器内多个标签页之间的通信?

  • ⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?

  • 简述⼀下src与href的区别?

  • cookies,sessionStorage,localStorage 的区别?

  • HTML5 的离线储存的使用和原理?

  • 怎样处理 移动端 1px 被 渲染成 2px 问题?

  • iframe 的优缺点?

  • Canvas 和 SVG 图形的区别是什么?

JavaScript

  • 问:0.1 + 0.2 === 0.3 嘛?为什么?

  • JS 数据类型

  • 写代码:实现函数能够深度克隆基本类型

  • 事件流

  • 事件是如何实现的?

  • new 一个函数发生了什么

  • 什么是作用域?

  • JS 隐式转换,显示转换

  • 了解 this 嘛,bind,call,apply 具体指什么

  • 手写 bind、apply、call

  • setTimeout(fn, 0)多久才执行,Event Loop

  • 手写题:Promise 原理

  • 说一下原型链和原型链的继承吧

  • 数组能够调用的函数有那些?

  • PWA使用过吗?serviceWorker的使用原理是啥?

  • ES6 之前使用 prototype 实现继承

  • 箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?

  • 事件循环机制 (Event Loop)

开源分享:docs.qq.com/doc/DSmRnRG…