el-pagination分頁優化

表格分頁優化：

<template>
  <el-pagination
    small
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageTotal"
  />
</template>
<script>
export default {
  props: {
    resetPageSize: {// 重置頁面
      type: Boolean,
      default: false
    },
    dataTotal: {// 總條數
      type: [String, Number],
      default: 0
    },
    tableBegin: {// 總數據
      type: Array,
      default () {
        return []
      }
    },
    pageSizes: {// 分頁條數：自定義[10,20,30]
      type: Array,
      default () {
        return [15, 25, 50, 100]
      }
    }
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 15
    }
  },
  computed: {
    pageTotal () { // 分頁前總條數：后台讀取或直接計算傳入數據
      return this.dataTotal || this.tableBegin.length
    }
  },
  watch: {
    tableBegin: {
      immediate: true,
      handler () { // 加載數據:初始化、更新數據
        this.resetSize()
        this.updateData()
      }
    },
    resetPageSize: {
      immediate: false,
      handler () { // 切換路由等:重置分頁
        this.resetSize()
      }
    }
  },
  methods: {
    // 跳轉到第幾頁
    handleCurrentChange (val) {
      this.currentPage = val
      this.updateData()
    },
    // 設置分頁條數
    handleSizeChange (val) {
      this.resetSize()
      this.pageSize = val
      this.updateData()
    },
    // 重置分頁
    resetSize(){
      this.currentPage = 1
      this.pageSize = this.pageSizes[0] || 15
    },
    // 更新數據
    updateData(){
      const begin = (this.currentPage - 1) * this.pageSize
      const end = this.currentPage * this.pageSize
      const tableData = this.tableBegin.slice(begin, end)
      if (this.dataTotal) { // 后台請求：不返回數據
        this.$emit('table-pagination-update', this.currentPage, this.pageSize)
      } else {
        this.$emit('table-pagination-change', tableData, this.currentPage, this.pageSize)
      }
      this.$emit('change', tableData, this.currentPage, this.pageSize)
    }
  }
}
</script>

如何使用：

    <!-- 頁碼 -->
    <pagination
      style="margin-top:10px"
      :page-sizes="pageSizes"
      :table-begin="tableBegin"
      @table-pagination-change="getTablePagination"
    />
  </div>
</template>

<script>
import pagination from 'module-comp/tablePagination'
export default {
  components: {
    pagination
  },



    // 分頁方法
    getTablePagination (data, currentPage, pageSize) {
      this.tableData = data
      this.currentPage = currentPage
      this.pageSize = pageSize
    },

 后台控制返回：

     <pagination
        ref="pager"
        style="margin-top:20px"
        :data-total="dataTotal"
        :reset-page-size="resetPageSize"
        @table-pagination-update="tablePaginationLoad"
      />

    // 表格分頁：點擊分頁后拉新業務
    tablePaginationLoad (pagenum, pagesize) {
      this.pagenum = pagenum - 1
      this.pagesize = pagesize
    this.featureSearchChange(this.keyWords,this.businessIdSet,false)
    },

 // 搜索:所有數據的刷新
    featureSearchChange (val, businessId, resetPageSize) {
      if (resetPageSize) { // 搜索時切換業務
        this.pagenum = 0
        this.resetPageSize = !this.resetPageSize
      }
      const businessIdSet = businessId || ''
      const paramet = {
        'business.id': this.globalPage ? businessIdSet : this.businessIdSet,
        'pagenum': this.pagenum,
        'pagesize': this.pagesize,
        'authority': this.authority, // 個人或公共
        'keyword': val || ''
      }
      this.onLoadData(paramet)
    },
    // 重置分頁
    // resetSize(){
    //   this.$refs.pager.resetSize()
    // },
    // 加載數據getAllData()
    onLoadData (paramet) {
      if (paramet) {
        this.loadingData = true
        getAllData(paramet).then(res => {
          if (res && res.data && res.data.err_code === '0' && res.data.info) {
            const result = res.data.info
            this.dataTotal = res.data.num || 0 // 總條數
            const tableData = [] // 展示數據
            if (result && result.length > 0) { // 省略遍歷自定義result
              this.tableBegin = tableData
              this.loadingData = false
            } else {
              this.tableBegin = []
              this.loadingData = false
            }
          } else {
            this.tableBegin = []
            this.dataTotal = 0 // 總條數
            this.$message.error(res.data ? res.data.err_desc : '獲取特征數據失敗')
            this.loadingData = false
          }
        }).catch(() => {
          this.loadingData = false
          this.$message.error('獲取數據失敗')
        })
      }
    }
  }

-end-