简述
elementUI中的组件本身是已经经过封装的便于开发，但是由于项目使用次数过多，为了更简便的统一使用将其进行封装复用。
初学者可参考官方文档
封装组件
- 子组件封装分页组件
Pagination.vue
<template>
<!-- 分页组件 -->
<!-- size-change（每页条数） pageSize 改变时会触发 -->
<!-- current-change（当前页） currentPage 改变时会触发 -->
<!-- page-size 每页显示条目个数，支持 .sync 修饰符 -->
<!-- page-sizes 每页显示个数选择器的选项设置 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 2, 5, 10]" :page-size="pageSize" :layout="layout" :total="total">
</el-pagination>
</template>
<script>
export default {
props: {
currentPage: {
type: [String, Number],
default: 1
},
total: {
type: [String, Number],
default: 0
},
pageSizes: {
type: Array,
default: () => ([10, 15, 30, 50]),
},
pageSize: {
type: [String, Number],
default: 10
},
// prev表示上一页，next为下一页，pager表示页码列表,jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量
// total, sizes, prev, pager, next, jumper
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
}
},
data() {
return {}
},
methods: {
handleSizeChange(val) {
// 子组件向父组件传值
this.$emit('sizeChange', val)
},
handleCurrentChange(val) {
this.$emit('currentChange', val)
}
}
}
</script>
<style lang="less" scoped>
.page {
text-align: center;
color: #409EFF;
}
</style>
- 父组件 引用子组件
PageTest .vue
<template>
<Pagination @sizeChange='handleSizeChange'
:pageSize='pageSize'
@currentChange='handleCurrentChange'
:currentPage='currentPage' :total='total'></Pagination>
</template>
<script>
import qs from 'qs'
import Pagination from '@/components/utils/Pagination'
export default {
components: {
Pagination,
},
data() {
return {
globalList: [],
// 当前页数量
pageSize: 1,
// 当前页
currentPage: 1,
// 总数
total: 1,
tag: '国内快讯TOPS',
}
},
created() {
this.getNewsList(this.tag)
},
methods: {
getNewsList(tagName) {
console.log(tagName)
const param = {
'page': this.currentPage,
'size': this.pageSize,
'tag': tagName
}
this.$axios({
url: "/api/art/findTag", //请求地址
method: "post", //请求方式
data: qs.stringify(param)
}).then(ok => {
// ok表示请求成功的数据
console.log(ok)
// 把请求到的数据给testDatas数组
this.globalList = ok.data.data.list
// 当前页数
this.currentPage = ok.data.data.pageNum
// 当前页数量
this.pageSize = ok.data.data.pageSize
// 分页总数
this.total = ok.data.data.total
console.log(JSON.stringify(ok.data.data.total))
});
},
// 监听 pagesize改变的事件
handleSizeChange(newSize) {
// console.log(`每页 ${val} 条`);
console.log(newSize)
this.pageSize = newSize
this.getNewsList(this.tag)
},
// 监听 页码值 改变事件 第几页
handleCurrentChange(newSize) {
// console.log(`当前页: ${val}`);
console.log("111:" + newSize)
this.currentPage = newSize
this.getNewsList(this.tag)
},
},
}
</script>
