使用ElementUI的分页组件
1 官网:http://element-cn.eleme.io/#/zh-CN
2 使用步骤:
第一步:创建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>
第二步:引入elementUI的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue-2.5.17.js"></script>
<!-- 引入样式 -->
<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>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
el:"#app"
});
</script>
</body>
</html>
第三步:搜索分页组件栏
复制代码:
<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>
第五步:添加事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue-2.5.17.js"></script>
<!-- 引入样式 -->
<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>
</head>
<body>
<div id="app">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
currentPage:3,// 当前页码
pageSize:10,// 每页大小
total:1000
},
methods:{
//? 长度改变----改变每页显示的条数的时候 自动触发
handleSizeChange(val){
console.log("长度改变:"+val)
},
// 当前改变----当前页码改变之后,触发这个函数
handleCurrentChange(val){
console.log("当前改变:"+val)
}
}
});
</script>
</body>
</html>