簡(jiǎn)述

elementUI中的組件本身是已經(jīng)經(jīng)過(guò)封裝的便于開(kāi)發(fā)，但是由于項(xiàng)目使用次數(shù)過(guò)多，為了更簡(jiǎn)便的統(tǒng)一使用將其進(jìn)行封裝復(fù)用。

初學(xué)者可參考官方文檔

初學(xué)者可參考官方文檔學(xué)習(xí)簡(jiǎn)單示例

封裝組件

• 子組件封裝分頁(yè)組件
  Pagination.vue

<template>
  <!-- 分頁(yè)組件 -->
  <!-- size-change（每頁(yè)條數(shù)）    pageSize 改變時(shí)會(huì)觸發(fā) -->
  <!-- current-change（當(dāng)前頁(yè)）  currentPage 改變時(shí)會(huì)觸發(fā) -->
  <!-- page-size    每頁(yè)顯示條目個(gè)數(shù)，支持 .sync 修飾符 -->
  <!-- page-sizes   每頁(yè)顯示個(gè)數(shù)選擇器的選項(xiàng)設(shè)置 -->
  <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表示上一頁(yè)，next為下一頁(yè)，pager表示頁(yè)碼列表,jumper表示跳頁(yè)元素，total表示總條目數(shù)，size用于設(shè)置每頁(yè)顯示的頁(yè)碼數(shù)量
      // 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: [],
        // 當(dāng)前頁(yè)數(shù)量
        pageSize: 1,
        // 當(dāng)前頁(yè)
        currentPage: 1,
        // 總數(shù)
        total: 1,
        tag: '國(guó)內(nèi)快訊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", //請(qǐng)求地址
          method: "post", //請(qǐng)求方式
          data: qs.stringify(param)
        }).then(ok => {
          // ok表示請(qǐng)求成功的數(shù)據(jù)
          console.log(ok)
          // 把請(qǐng)求到的數(shù)據(jù)給testDatas數(shù)組
          this.globalList = ok.data.data.list
          // 當(dāng)前頁(yè)數(shù)
          this.currentPage = ok.data.data.pageNum
          // 當(dāng)前頁(yè)數(shù)量
          this.pageSize = ok.data.data.pageSize
          // 分頁(yè)總數(shù)
          this.total = ok.data.data.total
          console.log(JSON.stringify(ok.data.data.total))
        });
      },
      // 監(jiān)聽(tīng) pagesize改變的事件
      handleSizeChange(newSize) {
        //  console.log(`每頁(yè) ${val} 條`);
        console.log(newSize)
        this.pageSize = newSize
        this.getNewsList(this.tag)
      },
      // 監(jiān)聽(tīng) 頁(yè)碼值 改變事件 第幾頁(yè)
      handleCurrentChange(newSize) {
        //  console.log(`當(dāng)前頁(yè): ${val}`);
        console.log("111:" + newSize)
        this.currentPage = newSize
        this.getNewsList(this.tag)
      },
    },
  }
</script>