分页el-pagination在vue中的使用及组件化

Pagination 分页，当数据量过多时，使用分页分解数据。

element-ui地址： https://element.eleme.cn/#/zh-CN/component/pagination

1. 在页面中直接使用el-pagination

<template>
  <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="start"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
           start: 1, //当前开始页 
           pagesize: 10, // 每页数
           total: 0,
      }
    },
    methods:{
       //模拟对应的请求列表数据的方法
      async init() {
       let res = await logList({
          start: this.start,
          pageSize: this.pagesize,
          ip: this.formInline.ip, // ip地址
          loginName: this.formInline.loginName, //登录名字
          beginTime:this.formInline.startDate,
          endTime: this.formInline.endDate,
      });
      if (res.code == 200) {
        this.tableData = res.data.list;
        this.total = res.data.total;
      }
    },
        // 分页事件
    handleSizeChange(val) {
      this.pagesize = parseInt(`${val}`);
      this.init();   //改变后再次调用列表接口
    },
    // 分页事件
    handleCurrentChange(val) {
      this.start = parseInt(`${val}`);
      this.init();  //改变后再次调用列表接口
    },
  }
 }
 </script>

2. 组件化封装el-pagination

2.1 在src下的components文件夹下创建Pagination文件夹，在其中创建index.vue文件。

index.vue

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
// import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'Pagination',
  props: {
    total: {     // 总页数 注这里 设置的是type为Number  使用页面初始化时候要是设置了null就报错了
      required: true,
      type: Number
    },
    page: {     // 当前页数
      type: Number,
      default: 1
    },
    limit: {      // 每页数
      type: Number,
      default: 20
    },
    pageSizes: {   // 每页显示个数选择器的选项设置
      type: Array,
      default() {
        return [10, 20, 50, 100]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: { //设置background属性可以为分页按钮添加背景色。
      type: Boolean,
      default: false
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      // if (this.autoScroll) {
      //   scrollTo(0, 800)
      // }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      // if (this.autoScroll) {
      //   scrollTo(0, 800)
      // }
    }
  }
}
</script>

<style scoped>
.pagination-container {
  /* background: #fff;
  padding: 32px 16px; */
}
.pagination-container.hidden {
  display: none;
}
</style>

2.2 在对应组件调用

这里用到了.sync 没用使用 自定义事件

<template>
  <div>
     <Pagination  :total="total" :page.sync="page" :limit.sync="limit" @pagination="init" />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
  components:{
    Pagination
  },
  data() {
    return {
        page: 1, //当前开始页
        limit: 10, // 每页数
        total: 0,
     }
   },
     methods: {
    // 初始化事件
    async init() {
      let res = await playList({
        start: this.page,
        pageSize: this.limit,
        terminalId: this.formInline.num,
        playContent: this.formInline.task,
        categorize: 2,
        shopName: this.formInline.shopName,//店铺名称
      });
      if (res.code == 200) {
        this.tableData = res.data.list;
        this.total = res.data.total;
      }
    },
   }
}
<script>