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

1.安装elementUI：npm i element-ui -S2.引入elementUI组件（main.js文件中）import Element from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(Element, { size: 'small' })3.访问Element官网【组件–Layo...

过敏的小鱼干

6415人浏览 · 2018-11-06 11:35:27

过敏的小鱼干 · 2018-11-06 11:35:27 发布

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

在这里插入图片描述

PS：pageNum- -或+ +，但是不能 <1 也不能 >pagesum。发送请求时，url带上参数userId，pageNum，rows=10（表示前端规定每页展示10条数据），请求成功后台返回数组长度arrsum，总页数pagesum=arrsum/10（这一步应该放在created函数中）在这里插入图片描述

6.分页效果图如下

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^