zoukankan      html  css  js  c++  java
  • vue element-ui 分页组件封装

    <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(); //更新列表
    }

  • 相关阅读:
    Mac安装Homebrew的那些事儿
    SpringBoot:如何优雅地处理全局异常?
    JDK8日常开发系列:Consumer详解
    Docker 快速安装Jenkins完美教程 (亲测采坑后详细步骤)
    Linux安装Git-两种方式详细教程)
    Linux安装maven(详细教程)
    Linux安装jdk(详细教程)
    Docker基础概念与安装
    JVM参数及调优
    JDK内置工具命令
  • 原文地址:https://www.cnblogs.com/Byme/p/10095144.html
Copyright © 2011-2022 走看看