關於element中el-select數據量大時如何進行分頁

在使用element中的el-select中因為有時候數據可能會比較多，所以我就想分步加載顯示，就像：

因此我在組件中這么寫的：

下面是樣式

<style lang='stylus' scoped>
    .selectJob
        span
            width 120px
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
        .text
            padding-left 10px
            font-size 14px
            font-weight bold
            cursor pointer
            color cornflowerblue
<style>

我們可以打開F12審查元素，我們可以看到元素渲染之后的樣子：

 

 下面就以我自己寫的項目為例，展示剩下的過程：

<script>
export default {
  data () {
    return {
      total: null // 獲取總數據量
      pageCount: null // 獲取總頁數
      selectPage: 1 // 當前頁數
      restoreTable: [] //當前頁數數據
    };
  },
  mounted () {
    this.getTableList(); // 初始化
  },
  methods: {
    getTableList (form = {}) {
      let obj = Object.assign({}, 
 {currentPage:this.selectPage,pageSize: 20}, form);
      restoreList(obj).then(res => {
        if (res.data.data && !res.data.data.hasOwnProperty('list')) { this.restoreTable = []; return; };
        this.restoreTable = res.data.data.list;
        this.total = (res.data.data && res.data.data.totalSize); // 數據總數量
        this.pageCount = Math.ceil(this.total / 20); // 因為我每次只請求20條， 所以算出總頁數
        this.taskId = this.restoreTable[0].id; // 因為每次都選取第一條數據;
      });
    },
    prevePage () {
      --this.selectPage;
      if (this.selectPage < 1) { // 判斷點擊的頁數是否小於1
        this.selectPage = 1;
      };
      this.getTableList();
    },
    nextPage () {
      if (this.selectPage < this.pageCount) { // 判斷點擊的頁數是否小於總頁數;
        ++this.selectPage;
        this.getTableList();
      }
    }
  }
};
</script>                        

好了，所有經過大概就都是這樣了