一:在项目中下载并且引入element ui --- element ui
(1) : 下载
npm i element-ui -S
(2) : 在vue项目man.js中引入挂载上element ui及其样式
import ElementUI from 'element-ui' //element ui
import 'element-ui/lib/theme-chalk/index.css' //css样式
Vue.use(ElementUI, {size:"small" //size是指按钮}); //挂载
二:在要使用的组件中进行直接使用
//此块代码是放在template中的---也就是我们要放置显示分页的区域
<!-- *分页器* -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[8, 16, 24, 32, 40]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
<!-- *分页器 end * -->
//以下几个key值是放在data中的
//页面如果涉及到表单搜索查询 当前页数与每页条数放置在表单取值中
current: 1, //当前页数
size: 8, //每页显示条数
// 分页配置 跳转到多少页的
currentPage: 1, //直接跳转到的页数
total: 100, //总条数
//以下是放在methods中,是用来点击切换页码与条数的
//分页
handleSizeChange(val) {
this.formInline.size = val; //formInline 是我页面表单的数据对象
this.Data(); //此处调用页面涉及到搜索 应调用放置搜索事件 无搜索直接调用页面数据接口即可
},
handleCurrentChange(val) {
this.formInline.current = val;
this.Data();//此处调用页面涉及到搜索 应调用放置搜索事件 无搜索直接调用页面数据接口即可
},
效果:
类型可根据官网进行切换 --- 分页地址
分页在组件中的简单使用教程,小白入门级哦~~~