vue中使用element组件的Layout布局和Button按钮实现分页

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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.分页效果图如下

以上是 vue中使用element组件的Layout布局和Button按钮实现分页 的全部内容， 来源链接： utcz.com/z/377242.html

回到顶部