VUE 页码封装组件

pagination/index.vue ：

<template>
  <div class="pagination-contianer">
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange"> </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'Pagination',
  props: {
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    currentChange(current) {
      this.$emit('trigger-event', current)
    }
  }
}
</script>
<style lang="stylus" scoped>
.pagination-contianer {
  margin-top: 10px;
  text-align: right;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #387dff !important;
  color: #FFF;
}

/deep/ .el-pagination.is-background .el-pager li {
  background-color: #1c1e22 !important;
}
/deep/ .el-pagination .btn-next, .el-pagination .btn-prev {
  background-color: #1c1e22 !important;
}
/deep/ .el-pagination.is-background .btn-prev {
  background-color: #1c1e22 !important;
}
</style>

table表页面，看文件结构：

views/defects/ index.vue 代码：

<template>
  <div class="project-container">
    <div class="table">
      <DefectList :defect-list="keyword ? filterDefectList : defectList" :total="fetchListPageData.total" :on-page-change="pageChange" />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import DefectList from './components/DefectList.vue'

export default Vue.extend({
  name: 'Index',
  components: {
    DefectList
    // TypeIcon
  },
  data() {
    return {
      defectList: [],
      filterDefectList: [],
      placeholderWords: '搜索缺陷',
      keyword: '',
      fetchListPageData: {
        total: 0,
        page: 1,
        pageSize: 10
      }
    }
  },
  watch: {
    keyword(newVal) {
      const keyVal = newVal.replace(' ', '')
      this.filterDefectList = keyVal ? this.defectList.filter(item => item.title.includes(keyVal)) : this.defectList
    }
  },
  created() {
    this.getDefectList()
  },
  methods: {
    async getDefectList() {
      try {
        const res = await API.Defect.defectListData({
          keyword: '',
          page: this.fetchListPageData.page,
          pageSize: this.fetchListPageData.pageSize
        })
        this.defectList = res.data.list
        this.fetchListPageData.total = res.data.total
      } catch (error) {
        warn(error, true)
      }
    },
    pageChange(current: number) {
      this.fetchListPageData.page = current
      this.getDefectList()
    }
  }
})
</script>

<style lang="stylus" scoped>
.project-container {
  .project-name {
    img {
      position: relative;
      top: 3px;
    }
  }
}
</style>

DefectList.vue

<template>
  <div>
    <div style="position: relative; transition: all ease 0.5s">
      <div class="block">
        <Pagination popper-class="sizes" :total="total" @trigger-event="getCurrentPageNum" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Pagination from '@/components/Pagination/index.vue'

export default Vue.extend({
  components: {
    Pagination
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    onPageChange: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    getCurrentPageNum(current: number) {
      this.onPageChange(current)
    }
  }
})
</script>