vue+Element-ui項目中抽離分頁組件（包括前端分頁和服務器端分頁兩種）

在components文件夾中新建分頁組件Pagination.vue，代碼以下

<template>
  <el-row>
    <div class="number">
      <div>
        總共
        <span>{{currtotal}}</span> 條記錄，每頁顯示
        <span>{{currpageSize}}</span> 條
      </div>
    </div>
    <div class="pag-wrap">
      <el-pagination background class="pag" @current-change="pageChange" layout="prev, pager, next" :page-size="currpageSize" :total="currtotal"></el-pagination>
    </div>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      currpageIndex: 1,  //當前頁數
      currpageSize: this.pagesize,  //每頁顯示條數
      currservicePage: this.options.servicePage,  //是否服務端分頁
      currtotal: 0,   //總條數
      pagingResult: [],  //分頁結果
      serviceData: []  //服務器請求的數據，用於前端分頁，須要首次獲取全部服務端數據，進行前端js分頁
    };
  },
  props: {
    pagesize: {
      type: Number,
      default: 10
    },
    options: {
      type: Object
    }
  },
  created() {
    if (!this.currservicePage) {
      this.frontPaging();
    }
    else {
      this.serach();
    }
  },
  methods: {
    //分頁控件分頁事件
    pageChange(val) {
      if (val) {
        this.currpageIndex = val;
      }
      if (!this.currservicePage) {
        this.pagingResult = this.jsPagination(
          this.currpageIndex,
          this.currpageSize,
          this.serviceData
        );
        this.$emit("getPagingResult", this.pagingResult); //子組件像父組件傳值
      } else {
        this.serach();
      }
    },
    //父組件點擊「查詢按鈕」調用的事件
    serach(i) {
      if (i) {
        this.currpageIndex = 1;
      }
      if(this.currservicePage){
     this.$axios.get(`${this.options.url}&pageIndex=${this.currpageIndex}&PageSize=${this.currpageSize}`).then(res => 
      {
          this.pagingResult = res.data;
          this.currtotal = res.total;
          this.$emit("getPagingResult", this.pagingResult);  //子組件像父組件傳值
        });
      }else{
        this.frontPaging();
      }
    },
    //js分頁時，首次獲取服務器端全部數據
    frontPaging() {
      this.$axios.get(this.options.url).then(res => {
        this.serviceData = res;
        this.currtotal = this.serviceData.length;
        this.pageChange(); //調用分頁事件
      });
    },
    //前端js分頁方法
    jsPagination(pageNo, pageSize, array) {
      var offset = (pageNo - 1) * pageSize;
      return offset + pageSize >= array.length? array.slice(offset, array.length): array.slice(offset, offset + pageSize);
}
  }
};
</script>

其餘界面調用分頁方法，以下：

> 將分頁組件放在table下面
<el-input v-model="this.options.serachText" placeholder=""></el-input>
<el-button type="primary" @click="serach()">查詢</el-button>
<el-table ref="singleTable" :data="tableData">......</el-table>
<Pagination :options="options" @getPagingResult="getPagingResult"></Pagination>

<script>
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      options: {       
        serachText: ""
        servicePage: false, //是否爲服務器端分頁
        url: `/api/User/GetRoleInfoByProjectID?projectId=${localStorage.eleProjectId}` //查詢數據源路徑，條件可直接跟在後面
      },
      tableData: [],
    }
  },
  components: {
    Pagination
  },
  methods: {
    getPagingResult(result) {  //獲取子組件向父組件傳遞的值
      this.tableData= result;
      this.$refs.singleTable.setCurrentRow(this.tableData[0]); //默認選中第一行
    },
    serach() {
      //調用pagination組件中的serach方法
      this.options.url = `/api/User/GetRoleInfoByProjectID?serachText=${this.options.serachText}`
      this.$refs.pagination.serach(1); //傳入1，指的是顯示第一頁
    },
  }
}
</script>