- 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) } } });