Element-ui 中解决选择器（Select）因options 数据量大导致渲染慢、页面卡

业务场景：服务端返回两万多条数据需要在下拉框中展示,直接渲染会导致页面卡顿且需要很长时间等待,用户体验极差,所以我们把这个el-select优化一下,直接上代码。
相关知识传送门：
Vue实现自定义指令（directive）及应用场景
Vue中 实现函数的防抖、节流及应用场景
[code]                        
<script>export default {  data() {    return {      chooseValue: "",      options: [],      rangeNumber: 10,    };  },  methods: {     getList() {      // 测试数据25000条数据, 这里数据多少条无所谓,options.slice(0, rangeNumber)方法只会默认加载初始的10条数据      for (let i = 0; i < 25000; i++) {        this.options.push({label: "选择"+i,value:"选择"+i});      }     },    loadMore(n) {      // n是默认初始展示的条数会在渲染的时候就可以获取,详细可以打log查察      // elementui下拉凌驾7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法      return () => (this.rangeNumber += 5); // 每次滚动到底部可以新增条数  可自定义    },  },  beforeMount() {    this.getList();  },  directives:{    &#39;el-select-loadmore&#39;:(el, binding) => {      // 获取element-ui定义好的scroll盒子      const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");      if(SELECTWRAP_DOM){        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.rangeNumber += 5); // 每次滚动到底部可以新增条数  可自定义    },    // 筛选方法    filterMethod:_debounce(function(filterVal){      if(filterVal){        let filterArr = this.resOptions.filter((item)=>{          return item.label.toLowerCase().includes(filterVal.toLowerCase())        })        this.options = filterArr;      }else{        this.options = this.resOptions;      }    },500),    // 下拉框出现时，调用过滤方法    visibleChange(flag){      if(flag){        this.filterMethod()      }    },  },  beforeMount() {    this.getList();  },  directives:{    &#39;el-select-loadmore&#39;:(el, binding) => {      // 获取element-ui定义好的scroll盒子      const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");      if(SELECTWRAP_DOM){        SELECTWRAP_DOM.addEventListener("scroll", function () {          /**           * scrollHeight 获取元素内容高度(只读)           * scrollTop 获取大概设置元素的偏移值,           *  常用于:盘算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.           * clientHeight 读取元素的可见高度(只读)           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;           */          const condition = this.scrollHeight - this.scrollTop