vue中使用element组件的Layout布局和Button按钮实现分页
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
1.安装elementUI:npm i element-ui -S
2.引入elementUI组件(main.js文件中)
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element, { size: 'small' })
3.访问Element官网【组件–Layout布局,组件–Button按钮】
PS:el-row标签使用flex布局,justify属性指定end来定义子元素的排版方式。子元素使用el-button标签,点击上一页和下一页。
上一页 pageNum 下一页 pagesum
4.data( )中定义第几页pageNum,总页数pagesum,数组长度arrsum

5.点击上一页或下一页
PS:pageNum- -或+ +,但是不能 <1 也不能 >pagesum。发送请求时,url带上参数userId,pageNum,rows=10(表示前端规定每页展示10条数据),请求成功后台返回数组长度arrsum,总页数pagesum=arrsum/10(这一步应该放在created函数中)
6.分页效果图如下

A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)