对分页内容的二次封装，传入参数更简单直接，只有总数、当前页、每页多少个和变化后的调用
直接上代码吧，直接复制可用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引入vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.6/vue.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">
<pagination
:total="total"
:pageSize="pageSize"
:currentPage="currentPage"
@pagination="paginations"
></pagination>
</div>
</body>
<script>
let pagination = Vue.extend({
template:`<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSizeNum"
:layout="layout"
:total="total"
v-if="total >= 10"
>
</el-pagination>
</div>`,
name:"pagination",
props:{
currentPage: {
type: Number,
default: 1
},
pageSize: {
type: Number,
default: 10
},
total: {
type: Number
},
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper"
}
},
data() {
return {
pageNum: 1, // 当前页码
pageSizeNum: 10 // 每页条数
};
},
methods:{
handleCurrentChange(val) {
this.pageNum = val;
this.$emit("pagination", { pageNo: val, pageSize: this.pageSizeNum });
},
handleSizeChange(val) {
this.pageSizeNum = val;
this.pageNum = 1;
this.$emit("pagination", { pageNo: 1, pageSize: val });
},
},
watch:{
currentPage(val, old) {
this.pageNum = val;
},
pageSize:{
handler(val,old){
console.error(val,old)
if(val != old){
this.pageSizeNum = val;
}
},
}
}
});
Vue.component('pagination',pagination);
</script>
<script>
let vm = new Vue({
el: '#app',
data(){
return {
currentPage:1,
pageSize:10,
total:101
}
},
methods: {
paginations(d){
console.log(d)
}
}
})
</script>
</html>
当前页、每页多少个也可以不用传
网友评论