- 1 创建vue基本页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue-2.5.17.js"></script> </head> <body> <div id="app"> </div> <script> var vm = new Vue({ el:"#app" }); </script> </body> </html>
2 引入elementUI的组件
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>- 3搜索分页组件（http://element-cn.eleme.io/#/zh-CN ）
- 4赋值代码
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>- 添加事件
var vm = new Vue({ el:"#app", data:{ currentPage:3,// 当前页码 pageSize:10,// 每页大小 total:1000 }, methods:{ //? 长度改变----改变每页显示的条数的时候 自动触发 handleSizeChange(val){ console.log("长度改变:"+val) }, // 当前改变----当前页码改变之后，触发这个函数 handleCurrentChange(val){ console.log("当前改变："+val) } } });