当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue开发之封装分页组件与使用示例

Vue开发之封装分页组件与使用示例

2019年07月21日  | 移动技术网IT编程  | 我要评论

侦缉先锋,宋瑞珂,鲁志焰

本文实例讲述了vue开发之封装分页组件与使用。分享给大家供大家参考，具体如下：

使用elementui中的el-pagination来封装分页组件

pagination.vue:

<template>
  <div class="pagination">
    <el-pagination small class="text-center" @size-change="handlesizechange" @current-change="handlecurrentchange"
                :current-page="page.page" :page-sizes="pagesizes" :page-size="page.limit"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    total: {
      type: number
    } // 总条数
  },
  data() {
    return {
      pagesizes: [10, 20, 50, 100],
      page: {
        page: 1,
        limit: 10
      }
    };
  },
  methods: {
    // 每页条数变更
    handlesizechange(val) {
      this.page.limit = val;
      this.$emit('pagechange', this.page);
    },
    // 当前页码变更
    handlecurrentchange(val) {
      this.page.page = val;
      this.$emit('pagechange', this.page);
    }
  }
}
</script>
<style>
.pagination {
  margin: 20px 0;
}
</style>

使用创建的分页组件

<pagination :total="total" @pagechange="pagechange"></pagination>


// 页码切换
pagechange(item) {
  this.searchcontent.page = item.page;
  this.searchcontent.limit = item.limit;
  this.getlist();
},

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网