vue element-ui 分页组件封装
程序员文章站
2022-06-23 15:25:10
调用 // 分页import pages from 'components/common/pages/pages' components: { pages },
<template> <el-pagination @size-change="handlesizechange" @current-change="handlecurrentchange" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;"> </el-pagination> </template> <script type="text/ecmascript-6"> export default { components: { }, data() { return { } }, props: { pagesize: { type: number, default: 10 }, total: { type: number, default: 1 } }, watch: { }, methods: { //每页展示条数 handlesizechange(val) { //事件传递 this.$emit('handlesizechangesub', val); }, //当前页 handlecurrentchange(val) { //事件传递 this.$emit('handlecurrentchangesub', val); } }, // 过滤器设计目的就是用于简单的文本转换 filters: {}, // 若要实现更复杂的数据变换,你应该使用计算属性 computed: { }, created() { }, mounted() {}, destroyed() {} } </script> <style lang="scss" type="text/css" scoped> </style>
调用
// 分页
import pages from 'components/common/pages/pages'
components: {
pages
},
<pages :total="total" :page-size="pagesize" @handlesizechangesub="handlesizechangefun" @handlecurrentchangesub="handlecurrentchangefun"></pages>
handlesizechangefun(v) {
this.pagesize = v;
this._enterpriselist(); //更新列表
},
handlecurrentchangefun(v) { //页面点击
this.pagenum = v; //当前页
this._enterpriselist(); //更新列表
}
上一篇: 羊卓雍措,恬静、柔美的遐想
下一篇: *垦丁旅游景点大全