<template>
  <el-select
    v-model="value"
    placeholder="請選擇"
    filterable
    multiple
    v-el-select-loadmore="loadmore"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item.id">
    </el-option>
  </el-select>
</template>
 
export default {
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        // 獲取element-ui定義好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          /**
          * scrollHeight 獲取元素內容高度(只讀)
          * scrollTop 獲取或者設置元素的偏移值,常用于, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值默認為0.
          * clientHeight 讀取元素的可見高度(只讀)
          * 如果元素滾動到底, 下面等式返回true, 沒有則返回false:
          * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
          */
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      }
    }
  },
  data() {
    return {
      value: '',
      options: [],
      formData: {
        pageIndex: 1,
        pageSize: 20,
      }
    };
  },
  mounted() {
    this.getList(this.formData);
  },
  methods: {
    loadmore() {
      this.formData.pageIndex++;
      this.getList(this.formData);
    },
    getList(formData) {
      // 這里是接口請求數(shù)據, 帶分頁條件
      const _res = [1, 2, 3]; // 請求得到的數(shù)據
      this.options = [...this.options, ..._res];
    }
  }
};